I am fading in a hidden div as an overlay div (with jQuery). It appears above all elements of my page, except the Facebook Like button.
I tried z-index: 100; in CSS but it didn't work.
Anyone had that problem?
PS: Same thing happens with the Twitter button, but not with the Google +1 button
<fb:like href="http://www.apple.com" send="true" layout="button_count"
width="450" show_faces="false"></fb:like>
Ok, this seems to make sense, considering the twitter and Facebook button will use JS to create their buttons.
Because the JS will run client side after all your styles have loaded, it can always overwrite any attempts to cover it up.
I actually think covering up the facebook like button might be against the TOS but you will need to check into that.
Things to try
Encompassing Div
Create a div around it, with the appropriate z-index.
Correct z-index
Make sure the FB and Twitter buttons aren't creating z-index's greater than yours. While z-index technically only goes from 0-255 (i think), people go negative and above 255 to make sure they are the highest or lowest.
JavaScript
After the buttons have loaded, use JS to set the z-index or other properties to hide
Related
I've actually got the tooltip showing where I want it to show, that part is working. The text it's displaying is contained in a <span> that's hidden until they hover over a div that has the tooltip class on it, similar to the example on w3schools.com.
I have a column of div's and only certain ones get the tooltip class. The problem I'm having is that the span is successfully hidden in the div's that don't have the tooltip class, but it's still reserving the space for it and I'm having trouble figuring out how to get it to not do that.
I'm hiding the <span> with CSS's visibilty:hidden which hides the text but the space for it is still reserved. If I change it to display:none instead of visibility:hidden it hides the text and does not reserve the space for it, which makes sense and that is almost what I want except I can't make it visible again without posting back.
So now I'm debating putting the whole thing inside of an ajax call so I don't have to refresh the whole page, but I'm not sure that would work either.
Is this even possible, or does anyone have any suggestions?
I appreciate any help anyone can offer.
Thanks
You can try span{position:absolute}
Use js instead of css.
If you use css then it'll also create problems on responsive.
You can use bootstrap tooltip or simple jQuery
https://jqueryui.com/tooltip/
what you can do is, give that div an id, and through css hover, set the tooltip's display to block,
or you can use, javascript for this, regidter those divs with a on hover, function , check the target of the hovered element, if it matches with that one, set tooltip's div display property to block,,simple
I'm having trouble with my code with my CSS stylesheet and HTML index coding. I only have one problem and that is my CSS stylesheet isn't letting me place a div class into it. I'm using the free Brackets software which includes syntax highlighting and it's coming up red which is an error. Here is a picture of it:
http://i58.tinypic.com/ju97cl.png
As you can see in that picture, I've boxed around the place where it's disallowing me to place the div class into the stylsheet in white. I've given a working example with the blue box so I'm confused to why it's doing this.
My main question for you today is how do I create buttons directly in the center on the side of my page with CSS or however possible and how to edit these buttons like adding hover animations, visual looks etc? (I'm new to this by the way) Also, I want to lock the scrolling of my page in a certain area like in the picture described:
http://i62.tinypic.com/wmbyw.png
Lastly, I wish to ask how to make my content on the white area transition by sliding to the side for when I click a button to go onto the next page. However possible I would really appreciate if somebody gives me the time for this. Sadly I can't give another image because I don't have 10 reputation. so I hope you can make out what I'm trying to say.
I will be so grateful to anyone who helps me with this.
First off you need to close your .right-menu class with a }.
For effects and animations check out w3schools:
http://www.w3schools.com/css/css3_transitions.asp - transistion property
http://www.w3schools.com/css/css3_animations.asp - animations
Centering in CSS can be done with text-align: center or margin-left:auto; margin-right: auto.
To prevent scrolling of the body do body {overflow:hidden}
For sliding page content refer to my links above or checkout jQuery
http://www.w3schools.com/jquery/jquery_slide.asp
Rather than putting exact code down, i wish to ask a conceptual html/css/js question.
Normally a lightbox works by being placed on top of everything on the page using a z-index. What if you didnt want the lightbox on top of everything else? But instead push the footer down to make room for the new content. My gut feeling tells me that if you create the same z-index, and make the positioning relative, it should push all the other div's down. However this is not quite working.
I am trying to achieve the following: The user clicks a thumbnail, which pushes the footer down and opens a new div on the centre of the page with some content. If they decide to press an 'X', it closes the div, return back to the original thumbnail, moving the footer back up the page.
I thought using a lightbox, and modifying the code would be the quickest and easiest way. However i might be going about this all wrong. Any thoughts?
Thank You.
z-index is used only for elements that are stacked on top of each other. This doesn't seem to be the case for what you're trying to achieve.
You need to place the lightbox between the footer and content and set it to be hidden initially and whenever user clicks on the thumnail show the modal with javascript/jquery:
$(".thumb").click(function(){
$(".modal").slideToggle()
})
Here's a simple demonstration:
fiddle
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'm experiencing some strange behavior with a project i'm working on:
http://daft.net76.net/yah/
When you click the rules link the entire layout shifts to the left by a pixel or three. I've attributed this to the amount of content in that div, because when you click the 'Scores' link, which has a smaller content height.
The lower div structure looks like the following:
<div id="lowercontent">
<div id="rulesDiv" >
<h1>Rules</h1>
<p>Clicking the roll button rolls the dice. You have 3 rolls per turn.
After rolling you can choose to keep dice through rolls. Click a die to keep it through a turn.
Submit a combination of dice by clicking an option and clicking Score Roll.
To claim yahtzee either click the zee button, or score roll without anything selected.
To claim yahtzee either click the zee button, or score roll without anything selected.
To claim yahtzee either click the zee button, or score roll without anything selected.
To claim yahtzee either click the zee button, or score roll without anything selected.</p>
</div>
<div id="scoresDiv">
<h1>Scores</h1>
<p>1</p>
</div>
<p id="closeTest"><span id="close">close</span></p>
</div>
I'm using jquery functions to swap between the scores and rules.
lowercontent is a fixed width div. The inner rules and scores divs have no width.
Any ideas? Let me know if more detailed css on the divs is needed.
When the Rules div is shown, it is causing the scrollbar to appear. First, its really not a big deal.. I would just leave it alone.
If it really bothers you, add this to your CSS:
html { height: 100% }
body { height: 101% }
This will force a scrollbar to always be present so the layout won't shift.
My original answers are below but the truth is, there's only one good answer to this if you feel you need to do anything at all: modal windows.
A modal window is one that pops to the foreground and needs to be actioned before you can carry on doing what you were doing. You've used one before even if you didn't know the name. One example is an open file dialogue in an application. You have to pick a file or cancel to carry on.
On the web, you can replicate this functionality quite easily. It involves "overlay" over the content to stop the user touching it and the modal box on top of the overlay. Most web-examples shade the overlay to let the user know what has focus.
This fixes your problem because it stops the content getting longer by putting the new content over the old content and therefore the scroll-bar doesn't need to show.
Luckily for you, there are prefab solutions (see the last line of this) but I think the one that will work best for you is Facebox. It's light and sexy and does the job of just showing some information. it doesn't look like you need to get too bogged down in other actions.
Here, at least, it's because the scrollbar on the window pops up.
There are a few ways to fix this but all are pretty hacky or imperfect:
Use a left-aligned design.
On load, if the height is bigger than the computed height of the content (no scroll bar) force the content to create a scrollbar. Compare widths. Deduct half this from your left margin on your content. Yuck!
Manually centre the content using onload and onresize hooks to change the margin on the content. Probably the cleanest and you can leave it on margin:auto just in case. This won't work for IE6 but I guess that's expected.
You can put the content into tabs that the user has to switch between.
Use pop-in modal layers instead of attaching the content to the bottom of the page. I'm thinking something like LightBox but with content instead of images. I think there's probably a script out there that does this with content already.
Edit: See this for more tips on modal windows.