I have following problem: I have a page with a link, that opens a new page in current window. Below that link I have a new div with an explanatory text. Display style of the div is set to style="display: none". When I mouse over the link, hover effect changes the style of the div to style="display: block" and the div displays. Then I click on the link and new page opens. Then I go back with the back button of the browser and previous page returns. When I let the mouse on the browser back button the hover effect on the link is still active. Only when I returned to the body of the page, then the effect disappears.
Try to specify visited link style to none.
a:visited { display:none } add correct name.
Related
I have a popup on my page, it display on clicking any div on the page.
There are multiple divs, with which this popup is associated.
Now the issue is if i click on div, popup gets open, but if i scroll, popup also scroll and come to wrong div.
How to make it fixed to its associated div after click?
Here is a quick example. I'm hoping this is something like what you're talking about. When the first box is clicked, an alert pops up and stays with the first box when scrolling.
I used simple jQuery to create the popup.
$('.box').click(function() {
$('.alert').css('display', 'block');
});
http://jsfiddle.net/d8xwev9o/
I am using anchor tags with div id's assigned to them so the user is moved around the page.
Now my problem is when the user clicks the button, they are successfully transferred but I'm trying to make it so that div its brought to appears at the top of the page, not middle... you can see my progress and what i've tried by visiting the link i'm working on, all code is visible there.. you can see what I mean by clicking the home button.
http://eclipse-developers.com/v2/eclipse-developers.com/
This is because there is no enough space at the bottom of the page. try adding some br at the bottom of the page.
So, I want to set next to each other a Facebook like button(html5) and a Twitter tweet button.
Everything is set here: http://jsfiddle.net/tGujU/
I have one big problem when I click on the facebook like button.
Because it will show the comment pop-up (which I want to see poping-up), the facebook iframe get then resized to 450px. Once the pop-up disappears, the iframe is not resized to small dimension !
I set the design so no big space is created between the two buttons.
But the problem is then, once you click on the facebook like button, you cannot click on the tweet button anymore because the wide facebook iframe is covering it.
What I tried:
Use overflow:hidden on the div#facebook_button but then, I don't get to see the comment pop-up. => NG.
Change the iframe z-index to got the twitter iframe on the top => Did not work.
Add a listener on the FB iframe to try setting overflow:hidden at the right time and remove it when needed but could not find a way to listen to its changes.
What I want to do:
Keep providers in this order and not put Facebook on the right.
See the FB comment pop-up once like button is clicked.
Being able to click the tweet button after I click th FB button.
Having it supported in IE8+, FF4+ and Chrome.
Any help is welcome.
You could raise the z-index of the Twitter button (iframe), so that it is higher than any of the Facebook stuff.
#twitter_button iframe{
z-index:9999;
position:absolute
}
Not the prettiest solution, but it works (see the Fiddle).
.fb-like { width: 75px; } is what I do.
This is what I tend to do...
/* make the like button smaller */
.fb_edge_widget_with_comment iframe {
width:47px !important;
}
/* but make the span that holds the comment box larger */
.fb_edge_widget_with_comment iframe.fb_iframe_widget_lift {
width:450px !important;
}
The first bit of CSS sizes the like button however you want (in this case it's sized to hide the count bubble). The 2nd bit of CSS ensures that the comment box will be visible when the button's clicked.
Did you try giving it a fixed width of 120px. I think that would cover it
I see in the HTML tab of firebug i can drill down into the html elements of the page and it will highlight those sections on the page.
Is there anyway to do the opposite where i simply highlight over some area on a page and it will point me to that html inside firebug so i can see the html and css that is generating this?
You can right click in the page and choose inspect element. Chrome also features this. In IE 9 you can press ctrl+b with the developer tools window active. The next element you click will jump to the element in DOM explorer.
The blue rectangle at the upperleft corner can be clicked. Then, hover over the page, and click at any element to show the HTML tree and relevant CSS properties.
This feature is useful if you don't know which element has to be inspected, but if you know the rough area of the elements. During the hover, a blue outline will appear around the hovered element.
There's a button with a mouse pointer over a blue rectangle. It allows you to go to the actual site and select something, which makes firebug highlight the relevant section of HTML and the styles related
In firebug, click on the arrow with the box in the upper left. Then click on your item in the page.
I have a div section, which is full of tags, on a event on the page I shrink the div section BUT if the user tabs into the div section, it moves so that the highlighted <a href> has focus, is there any way to lock a div section that it's contents don't move ?
So for example the code (psuedo not real) I have the following
<div>
<h4>Heading</hv>
Link 1
Link 2
Link 3
</div>
I shrink the div section so that only the h4 is displayed {overflow:hidden}, however the user can then tab to the elements and this scroll so that they are displayed in the the div "window" which is not what I want, so in effect I get <div>Link 1<div> where what I want to remain is <div><h4>heading</h4></div> in effect I want to stop the contents of the div sectio scrolling so that the selected element is displayed. I know that if they press return the selected link will be follow, but I'm not worried about this, just what is displayed
I hope thats cleared, you can see my problem if you go to link text click on the training section on the left and then back tab (shift tab) , the article section above changes.
Thanks
is there any way to lock a div section that it's contents don't move?
Not really*, but you don't really want that anyway. Even if you locked it in place, the invisible links would still accept focus, resulting in a confusing tab behaviour.
(*: short of something horrendous like changing the scrollTop of the overflowing element from JavaScript onfocus. Ugh.)
What you should probably do is put a div around the links, and set its display style to ‘none’ when the links are elided. That way they won't participate in the tabbing order.
From what I can make of your question, you want your div to stay fixed relative to the browser window. If this is the case, it can simply be done by declaring position:absolute for the div.
If you want something else, please clarify your question.