Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.
Course Of The Month
3 days, 17 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
Rollover image (toggle) causes page shift
Posted on 2012-04-11
I have an issue that I cannot figure out how to resolve.
I have a toggle on my site that I use to flip between different versions of similar products.
There are many. visit sbravo daht com and navigate to... UDC > 7000 split. See the weak little toggle? (I'd love to upgrade this things graphics).
Every time it is clicked, the page snaps its top edge to the centerline of the toggle. When you click it again to switch back... the page snaps even lower to align with the top of my key features tab area.
What the heck?! I have seen this in IE and FF, both latest v. I have inspected this element and poked around the style.css where it appears some attributes for this thing are found. I'm not sure if there might also be something in the function.php to control this?
GOAL: I want it to stay PUT when clicked, and stop snapping the page up and down when loading the alternate page.
My most sincere thanks in advance. Also, If you can peel my site like an onion, I might have some work for you.
I have a toggle on my site that I use to flip between different versions of similar products.
There are many. visit sbravo daht com and navigate to... UDC > 7000 split. See the weak little toggle? (I'd love to upgrade this things graphics).
Every time it is clicked, the page snaps its top edge to the centerline of the toggle. When you click it again to switch back... the page snaps even lower to align with the top of my key features tab area.
What the heck?! I have seen this in IE and FF, both latest v. I have inspected this element and poked around the style.css where it appears some attributes for this thing are found. I'm not sure if there might also be something in the function.php to control this?
GOAL: I want it to stay PUT when clicked, and stop snapping the page up and down when loading the alternate page.
My most sincere thanks in advance. Also, If you can peel my site like an onion, I might have some work for you.
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
-
6
3
3- +1
14 Comments
Active today
I think you need to get rid of the
1) there is no <a name="options">
2) you change the url afterwards (in the onclick) so it seems useless to me
Try this:
However, the navigation action in itself may still cause a 'jump'.
href="#options"
1) there is no <a name="options">
2) you change the url afterwards (in the onclick) so it seems useless to me
Try this:
href="javascript:void(0)"
However, the navigation action in itself may still cause a 'jump'.
Thanks for the info. I cannot find where this line exists except in the source code, but it looks like this is a trigger #events for the one page, and #options for the other, with each linking back and forth to each other.
I don't think this is related to a button that loads another page. Are these #attributes just bundling a script for both the swapout of the toggle image and linking to the other page?
I need to find where to edit this button/toggle's properties, like where it is linking to. I have tried a Find for #events and #options on every css I know but can only find one reference in the primary style sheet that just lists 28px which is probably just it's position since the page snaps much farther than 28px each click. Would they be found in any php files?
I don't think this is related to a button that loads another page. Are these #attributes just bundling a script for both the swapout of the toggle image and linking to the other page?
I need to find where to edit this button/toggle's properties, like where it is linking to. I have tried a Find for #events and #options on every css I know but can only find one reference in the primary style sheet that just lists 28px which is probably just it's position since the page snaps much farther than 28px each click. Would they be found in any php files?
Active today
> Would they be found in any php files?
Yes, if it's not in your own sources than it could be generated in server side code like php. Any chance you could post that?
Maybe there's a call to a function in an included file which generates that block of html and could be influenced with parameters?
Yes, if it's not in your own sources than it could be generated in server side code like php. Any chance you could post that?
Maybe there's a call to a function in an included file which generates that block of html and could be influenced with parameters?
I will dig through the php's and see if I can find any reference to these. I will post whatever pops up.
The thing that bugs me is that I'm so used to opening the htm or html file and digging through the code. Bingo! I find everything I need. With wordpress... there doesn't seem to be any physical pages, everything is calling on everything else. And with a custom site this complex, some of my pages AND posts are all blank, with their content being controlled by who knows how many other files.
Reading through all the material at w3schools is helping a bit, but only a bit. My css and php kung fu is about 4 days old.
The thing that bugs me is that I'm so used to opening the htm or html file and digging through the code. Bingo! I find everything I need. With wordpress... there doesn't seem to be any physical pages, everything is calling on everything else. And with a custom site this complex, some of my pages AND posts are all blank, with their content being controlled by who knows how many other files.
Reading through all the material at w3schools is helping a bit, but only a bit. My css and php kung fu is about 4 days old.
Active today
Ah, I must admit I hadn't 'peeled' far enough to discover it was a Wordpress site, you hadn't mentioned it in your question. I haven't worked with that before but have worked with a number of CMS applications and it's usually possible to hide code in templates which sounds like what you're describing: a 'blank' page can only mean that the actual content is being generated elsewhere.
Can you describe in more detail how this page is defined, maybe provide a screendump?
Can you describe in more detail how this page is defined, maybe provide a screendump?
I shudder a little when I see javascript:void and w3schools (go to w3fools.com to see why)
I also shudder when I see Wordpress because it has so far been ridiculously hard to find anything in Wordpress.
That said, I'll fire up firebug and see what the CSS says. It will have to wait till after breakfast and as already said, it is possible we will find the culprit in the view source but not in the wp sources
I also shudder when I see Wordpress because it has so far been ridiculously hard to find anything in Wordpress.
That said, I'll fire up firebug and see what the CSS says. It will have to wait till after breakfast and as already said, it is possible we will find the culprit in the view source but not in the wp sources
Change
<a onclick="window.location="
<img alt="" src="http://sbravo.com/wp-content/themes/bravo/images/right_slideshow_btn.png">
</a>
to
<a onclick="window.location="
href="#options">
<img alt="" src="http://sbravo.com/wp-content/themes/bravo/images/right_slideshow_btn.png">
</a>
or better
<a href="http://sbravo.com/udc-sump/b-7000-split">
<img alt="" src="http://sbravo.com/wp-content/themes/bravo/images/right_slideshow_btn.png">
</a>
There is no reason for javascript at all
The reason you jump is because ID="options" is defined
<div id="options" class="ui-tabs-panel ui-widget-content ui-corner-bottom clearfix ">
<a onclick="window.location="
<img alt="" src="http://sbravo.com/wp-content/themes/bravo/images/right_slideshow_btn.png">
</a>
to
<a onclick="window.location="
href="#options">
<img alt="" src="http://sbravo.com/wp-content/themes/bravo/images/right_slideshow_btn.png">
</a>
or better
<a href="http://sbravo.com/udc-sump/b-7000-split">
<img alt="" src="http://sbravo.com/wp-content/themes/bravo/images/right_slideshow_btn.png">
</a>
There is no reason for javascript at all
The reason you jump is because ID="options" is defined
<div id="options" class="ui-tabs-panel ui-widget-content ui-corner-bottom clearfix ">
Active 5 days ago
@Michel:
No points for my rant, please. Best to all, ~Ray
shudder when I see WordpressI could not agree more. It's the perfect tool if you want to do only Wordpress things, like write an occasional blog entry. Once you try to extend its functionality to build a web application you're in a morass!
No points for my rant, please. Best to all, ~Ray
Thank you all. w3fools is great, thank you for that. I will definitely dig up the resources listed there.
I see this code in the page source, but cannot find it anywhere.. I am finding for "onclick" in all php and css documents I can find in my custom theme dir.
I see this code in the page source, but cannot find it anywhere.. I am finding for "onclick" in all php and css documents I can find in my custom theme dir.
Featured Post
We value your feedback.
Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.
Â
(CODE)
(CODE)
Then you just need to pass your date to the function.
If i…
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand.
Self-Executing functions are just one good example that I'll try to demystify here.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Learn how to create flexible layouts using relative units in CSS. New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month3 days, 17 hours left to enroll
691 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.