I modified a code I found online for spoilers to:
<a id="show_id" onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';" class="link">
<img src="{link1}" alt="Stats">
</a>
<span id="spoiler_id" style="display: none;position:absolute;top:5px;left:5px;">
<a onclick="document.getElementById('spoiler_id').style.display='none'; document.getElementById('show_id').style.display='';" class="link">
Hide
</a>
<br />
<iframe src="{link2}" width="600" height="175" frameborder="0"></iframe>
</span>
What this should do: Display a picture with alt code "Stats" on page load. When the picture is clicked, the picture will disappear and a span with Hide {iFrame} should appear hovering 5 pixels from the left and 5 pixels from the top.
This works correctly when left by itself. However, I want to put it online through a source that breaks this code (the picture will show up, but it will not change when clicked.) If I iFrame the element, then it works, except the span stays inside the iFrame. What I want to know is if there is a way to break the span out of the iFrame. The other option would be to break the iframe in that code out of the iframe it is in.
Thank you for any help you can provide. Note: I do realize that there is an incredibly high chance this is impossible. If so, a confirmation of that is much appreciated.
Edit: Turns out the place I want to put it on does not support Javascript.
The iframe acts as a nested browser window. You aren't able to position elements outside an iframe just like you aren't able to position them outside your browser.
You could try to hide the span inside the iframe and build a new span in the parent window with the same contents.
Related
I made style for a tag in my wordpress as a bottom-dotted border, so that I can tell users there's a clickable link.
However, in Wordpress, an image in post is inside a tag, which means that a border would show in the bottom of an image. This can't be changed in edit mode since the p which encloses a is automatically generated.
<p>
<a href="">
<img src="">
</a>
</p>
Is there a better way to deal with this? Maybe it's Javascript code to take the dotted border off from a, but I wonder if there's a better way.
You'll need Javascript because you want to search for a tags which are parent to img tag and in CSS, there are no parent selectors.
I am not very sure how should I describe / name the problem. This problem exists at the FB 'Like" and Twitter 'Tweet' buttons, on the upper right of the sidebar. In other browsers, it works perfectly (i.e. will be displayed and usable on hover), but it doesn't work in IE8/9/10.
Here is the link : http://billyf.site11.com/problem/singleblogpost-1.html
Here's the structure for each button :
<div class="button">
<img src="" alt="image shown before hover" />
<div class="meta">
//here is the button to be revealed on hover//
</div>
</div>
How it works
When a person hovers on .button, .meta will show (by changing it's absolute positioning), and .meta will contain the FB Like and Twitter Tweet button.
In IE, if you hover and move on the buttons, the 'Like' and 'Tweet' boxes will flicker and are non-clickable, hence they are completely useless. I tried z-indexing, but still doesn't work. I want it to work like the 'Comment' button (the 1st button on the left).
Thanks for any suggestion / help!
I'm trying to make a custom, irregular frame for a google maps iframe. You can see my results so far here:
http://bufident.com/pruebas/site02/contacto/contacto.html
(please forgive the sloppy markup)
The only way I could think up of doing this was by having 1 div with the frame overlapping the div with the map like this
<div style="width:418px; height: 375px;position:relative;top:-375px;z-index:3;">
<iframe width="418" height="375" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?q=bufident&hl=en&sll=40.397236,-3.704112&sspn=0.071946,0.071946&ie=UTF8&t=h&view=map&cid=5584215307643134377&hq=bufident&hnear=&ll=40.397238,-3.704109&spn=0.006128,0.008948&z=16&iwloc=A&output=embed"></iframe>
</div>
<div style="clear:both;"></div>
Unfortunately, if i do this i'm no longer able to interact with the map. I tried a slightly different method suggested in another thread ( http://www.cssbakery.com/2010/11/css-cookie-cutter-revisited.html ) but i get the same results
Any suggestions? thanks everyone
Use 4 images instead of one.. The div holding the images must be under the iframe, and the images above.. So you need absolute positioning for it.. That way the overlapping images are more border-like..
Also there is another solution that allows clicking through div's, found that in a jquery plugin. I'll check if I can find it..
EDIT
Here is a site which explains how cliking through divs works:
http://www.searchlawrence.com/click-through-a-div-to-underlying-elements.html
You are laying the DIV on top of the map, so you the Google Maps Javascript, won't detect clicks / interactions with it because you are actually clicking the DIV, rather than the map.
Don't think what you are trying to achieve would be possible. Best compromise I can see is to have the rough border on the outside of the box, but keep the inner edge of the border still a square. Set the background image on the parent DIV, and position the map in the middle of your div, on top. Something like this...
<div style="background:url(image.jpg); padding:20px">
<iframe />
</div>
Due to the structure of my website, I am forced to use a iframe to display the dropdown menu html file. if not, I am not able to see the dropdown in IE. Here is the code I am using:
<iframe id="a"name="FRAMENAME" src="http://website.com/dropdown.html"
width="1000" style="position:relative" background="#F3F0ED" style="z-index:10000"
height="40" frameborder="0" scrolling="no" allowautotransparency=true></iframe>
Now the problem is that the dropdown is hiding behind the other images on the website. I have specified position:relative and z-index:10000 but I cannot get it to overlap on the images. The z-index of these images is much less than 10000. Any suggestions please?
if your images are outside of your iFrame, of course your dropdown menu will not show up since you are trying to tell the dropdown menu to go out of its windows. iframe is a different window inside your html, therefore any overflow of the window will never go out, elements inside the iframe is not affected with the z-index.
what you could do is, if your http://website.com/dropdown.html has the dropdown content only, you can call it by jQuery
<div id="myDropDown">
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#myDropDown").load("http://website.com/dropdown.html");
});
</script>
this will append the content of your dropdown.html into the div
Just add "wmode=transparent" after "?"
don't remember!! set Property dropdown z-index too.
I have the following on a page:
<div style="max-width: 600px; overflow-x: scroll;">
<a href="PoolPanoramaBig.jpg" target="_blank">
<img src="PoolPanoramaBig.jpg" style=""/>
</a>
</div>
If the image is wider than 600px then you can scroll the image to the left to see the rightmost part. However, I want to default it so that it is already scrolled fully to the left when initially displayed.
I've tried setting a style in the image to float:left which works but that disables the horizontal scrollbar.
Ideas?
EDIT: Here's a page that might help explain what I'm trying to do: http://guyellisrocks.com/ie-example/
Do you see how you have to move the scroll bar to the right to see the right most edge of the image? I'd like it to default to that when you first hit the page.
I don't have a problem doing this in JavaScript and if that's possible some hints would be appreciated. Otherwise if it's possible to do this with CSS then this is how I would first attempt to do this.
Try adding an anchor to the right of the image. Something like:
<img src="foo.jpg"><a name="right_of_image"></a>
When or after navigating to the page, if you append the #right_of_image anchor to the document URL, the browser will try to focus on the anchor, effectively scrolling to the right edge of the image. This probably won't work if you're using a scrolling container like the one you have, but should work if the image is directly embedded in your page. Does this work for you?