I would like to expand/collapse a div when this div is clicked on. It already works with onmouseover/onmouseout, but I would prefer onclick.
Now, the problem seems to be the content of the div:
This works:
<div onclick="alert('works')" style="position:fixed; height:100px; width:100px; background:#FF0000;">
</div>
This doesn't work:
<div onclick="alert('works')">
<div style="position:absolute; top:0px; bottom:-18px; left:0px; right:-18px; overflow: hidden; z-index:300;">
<script>
document.write('<IFRAME id="test_frame" SRC="iframesrc.html" frameborder="0" WIDTH="100%" HEIGHT="100%"></IFRAME>');
</script>
</div>
</div>
But this (onmouseover instead of onclick) works again:
<div onmouseover="alert('works')">
<div style="position:absolute; top:0px; bottom:-18px; left:0px; right:-18px; overflow: hidden; z-index:300;">
<script>
document.write('<IFRAME id="test_frame" SRC="iframesrc.html" frameborder="0" WIDTH="100%" HEIGHT="100%"></IFRAME>');
</script>
</div>
</div>
I guess it must be some layering issue, but I tried putting the "onclick" into each of the different div/iframe layers and I couldn't get it to work. I'm a beginner and it'd be great to get a tip on what's wrong! Thanks!
I would recommend using JQuery for this.
You can do what you wanna do with 1 line of code.
write a test.js like this:
$(document).ready(function() {
// hides the div as soon as the DOM is ready
$('#yourDiv').hide();
// shows the div on clicking the noted link
$('#yourDiv-show').click(function() {
$('#yourDiv').show('slow');
return false;
});
// hides the div on clicking the noted link
$('#youDiv-hide').click(function() {
$('#yourDiv').hide('fast');
return false;
});
// toggles the div on clicking the noted link
$('#youDiv-toggle').click(function() {
$('#yourDiv').toggle(400);
return false;
});
});
Then import this javascript to your HTML,JSP etc...
If you set the first div with border 10px and click on that border it will work.
As you start a new div the first div is just the container, any javascript calls will not be triggered.
like border: 50px solid; you will see what i mean.
The onmouseover works because you actually go over the invisible line of the div.
JavaScript events are supposed to 'bubble' up through the ancestry of DOM nodes from the one you click, all the way up to the body node, executing any appropriate handlers registered for those nodes along the way, unless a specific event handler stops the propagation of that event.
I suspect the iframe is your issue, since that is a separate HTML document, with a separate event chain, and that events don't bubble out of that, but I don't know for certain.
I would try the jQuery suggestion above, but I think this particular situation is not going to allow even jQuery to work.
Related
I have added the following iframe to a page
<iframe src='http://redbug.redrocksoftware.com.au:80/Pages/chamara.html' style="position:absolute;z-index:1;" ></iframe>
chamara.html page contains a button and when I click that button I need the current page to cover up with an overly.
Feedback is the button inside iframe:
When I click it I need something like below to happen.
I have tried with iframe absolute positioning and z-index but couldn't get anything to work yet.
Haha, finally finished the demo! :P
Well, let's go. If you need the iframe cover the whole page only when his button is fired, you can use jQuery to handle the click event. You need use the contents() to get the iframe content, then the find() to get the element that you want. Basically this:
$("#iframe").contents().find("#iframe_button").click(function () {
// Button fired!
})
To the iframe cover all the page I wrote this CSS class:
.iframe_cover {
position:absolute;
top:0;
left:0;
width:100% !important;
height:100% !important;
border:0;
}
So, when the button is fired, the iframe will have this class. Look:
$("#iframe").contents().find("#iframe_button").click(function () {
$("#iframe").addClass("iframe_cover");
})
Demo: http://rafaelalmeida.net78.net/exemplos/soen/29454285-iframe-button/
On a website (find it by the link) I have links with images in footer (screenshot)
I have found a great glitch effect in a footer icons which I want to use. It chages images randomly if code looks like that:
<footer class="footer text-center">
<a target="_blank" href="http://link1.com"><img src="f2.jpg"></a>
<img src="f3.jpg">
<a target="_blank" href="http://link3.com"><img src="f1.jpg"></a>
<a target="_blank" href="http://link4.com"><img src="f5.jpg"></a>
<a target="_blank" href="http://link5.com"><img src="bc.png"></a>
<img src="mail.jpg">
</footer>
and simple style
.footer img:hover {
display:none;
}
But in that scenario click while hovering on of the image footers gives no result.
I've tried to use javascript:
var a_href
$("footer a").on("mousemove", function() {
a_href = $(this).attr('href');
console.log(a_href);
});
$(document).click(function(){
console.log("!!!!!!!!!!!");
console.log(a_href);
window.open(a_href,'_blank');
});
Idea was to save the last hovered link and then emulate the click on it by clicking any other element. But that method works only if I click anywhere ELSE than a space over the glitchy icons. Same with $('body').click, $('.footer').click.
I've tried to overlay footer with other div on which i'd be putting .click but then display:none on hover doesn't work.
Here is a jsfiddle - http://jsfiddle.net/yssdjr17/1/
What should I do? Thank you.
UPD
If we use something instead of a display:none we loose the cool glitch effect that way. We loved how randomly elements collapsed and that user might click on one of the elements, but never sure on which one. Some sort of a minigame for him.
Is there a way to listen for a mouseclick, in browser, no matter on what element?
Don't use display: none, use visibility: hidden instead. This way the element will still be there, just not visible.
.footer img:hover {
visibility: hidden;
}
JSFiddle demo.
The effect makes it look broken.
You can't fire the click event from anything hidden or not displayed.
Instead try:
<div id="awesomelink" onclick="openawesomewindow('http://link1.com');"></div>
#awesomelink
{
height:60px;
width:60px;
background-image:url('f1.jpg');
}
#awesomelink:hover
{
background-image:url('awesomecrazyanimated.gif');
}
It's how I'd do it and you'll get a more consistant result across different browsers.
Also the menu of icons won't be shortened by one element making savvy surfers afraid to click.
I'm trying to build a webpage that is essentially one page, but with four 'hidden' divs that will fade in and out of visibility when you click on menu buttons along the bottom.
I would like to put a 'close' button at the top of each of these divs so you can 'close' that div - but it would be great if the div still faded out on its own when a new menu item is clicked. So far I've created the div boxes and the links using css and html, but I'm an absolute newbie when it comes to javascript. Here's the code I have so far
HTML:
<div class="menu">
<a class="portfolio" href="http://www.google.com"> Portfolio </a> | <a class="aboutme" href="http://www.google.com"> About Me </a> | <a class="education" href="http://www.google.com"> Education</a> | <a class="contact" href="http://www.google.com"> Contact</a>
</div>
<div>`
(NOTE: I only put google as the link target because I didn't know what else to put).
CSS:
.aboutmewindow
{
width:583px;
height:557px;
border-bottom-style:dashed;
position:absolute;
top:0px;
z-index:2;
}
.portfoliowindow
{
width:583px;
height:557px;
border-bottom-style:dashed;
position:absolute;
top:0px;
z-index:2;
}
.educationwindow
{
width:583px;
height:557px;
border-bottom-style:dashed;
position:absolute;
top:0px;
z-index:2;
}
.contactwindow
{
width:583px;
height:557px;
border-bottom-style:dashed;
position:absolute;
top:0px;
z-index:2;
}`
I've tried writing a little bit of the javascript on my own, but it's seriously out of my depth at this point. I'm going to keep going through tutorials though, so hopefully I'll get the hang of it.
Anyone have any suggestions? Or good tutorials?
Thanks!
you can try this its a simple example but without all your markup and code you can get the idea .. requires jQuery
http://jsfiddle.net/YnzRV/9/
$(function(){
$("#main > .box").not(":first").hide();
$(".menu").on("click", "a", function(){
var $this = $(this),
dataBox = $this.data("box");
$("#main > .box").hide();
$("."+dataBox).fadeIn(400);
return false;
});
});
if you check the jsfiddle you will see how i added data attributes that get passed through the click handler to tell it which div to show using the data attributes
This is a slightly outdated (August, 2012) tutorial showing you the HTML, CSS, and JavaScript required to fade elements in, fade them out, and fade them to a specific opacity.
http://www.mkyong.com/jquery/jquery-fadein-fadeout-and-fadeto-example/
You're essentially trying to learn about the following:
.fadeIn()
.fadeOut()
.fadeTo()
jQuery's .click() handler
jQuery's .on() handler
You can use fadeIn() or fadeOut().
Use it like this:
$('selector').fadeIn(); // you can use time in ms, inside ()
Similarly, you can use fadeOut too. But keep in mind, that you have the latest version of jQuery linked to your web page.
Links:
http://jquery.com
I have two elements on top of each other. When I click a button on the first div, the second div opens on top of the first div, and what I want to do is to make the underlaying div non-interactive (That I can't click on anything on the underlaying-div as long as the overlaying-div is open).
Javascript code:
$('#button').live('click', function()
{
$('#underlaying-div).fadeTo("fast", 0.7);
$('#overlaying-div).css('display', 'block');
//Do something here to make the underlaying div unclickable
});
$("#overlaying-div").live("click", function() {
$(this).hide();
$('#underlaying-div).fadeTo("slow", 1.0);
//Do something here to make the underlaying div clickable again
});
CSS-code:
#overlay-div
{
position:absolute;
left:0;
top:0;
display:none;
z-index: 20000;
}
I know I can use event.preventDefault() to make sure nothing happens if you click on an element in the underlaying-div, but I'd rather want that nothing happens at all when you for instance hover over an button (with preventDefault(), hover and other stuff still happens).
Any other ways in CSS or javascript/JQuery that can fix this problem??
Not sure of your final product, but if the underlaying div get overlapped by the overlaying in a way that the underlaying div is not visible anymore you could just display:block; the underlaying div.
This is a very old question, but if someone happens upon it, you might find it useful to toggle the pointer-events CSS property of the object you want to disable. You won't need to manually remove click bindings or add any other wrappers. If an object has pointer-events set to 'none', no events will fire when it is clicked.
In jQuery:
$('#underlaying-div).css('pointerEvents', 'none'); // will disable
$('#underlaying-div).css('pointerEvents', 'auto'); // will reenable
You could use unbind to remove the click event handler like this:
$(this).unbind('click'):
My concern is if this works with a live bind but you should at least try it :)
Why don't you use jQuery .fadeIn() and .fadeOut() functions? You have two divs with id="div1" and id="div2" and you have a button in div1 with id="button1" and a button in div2 with id="button2".
CSS code:
#div1 {
//some CSS code without z-index
}
#div2 {
//some CSS code without z-index
visibility:hidden;
}
jQuery code:
$('#button1').click(function(){$('#div1').fadeOut('slow', function(){$('#div2').fadeIn()})})
$('#button2').click(function(){$('#div2').fadeOut('slow', function(){$('#div1').fadeIn()})})
I'm trying to get buttons to appear when hovering over an image. The following works:
jQuery('.show-image').mouseenter(function() {
jQuery('.the-buttons').animate({
opacity: 1
}, 1500);
}).mouseout(function() {
jQuery('.the-buttons').animate({
opacity: 0
}, 1500);
});
However, when moving from the image to the button (which is over the image), the mouseout/mouseenter is triggered, so the buttons fade out then fade back in (the buttons have the same class as the image, otherwise they just stay faded out). How can I prevent this from triggering? I've also tried the above code using jQuery's hover; same results. Here's a detail of the image showing the button with opacity 1 (because I'm over the image):
http://i.stack.imgur.com/egeVq.png
Thanks in advance for any suggestions.
The simplest solution is to put the two in the same parent div and give the parent div the show-image class.
I like to use .hover() to save a few key strokes. (alll hover does is implement .mouseenter() and .mouseleave(), but you don't have to type them out)
Additionally it's very imporant to fade $(this).find(".the-buttons") so that you only change the button in the hovered over div otherwise you would change all of the .the-buttons on the entire page! .find() just looks for descendants.
Finally, .animate() will work, but why not just use .fadeIn() and .fadeOut()?
JS:
jQuery(function() { // <== Doc ready
jQuery(".the-buttons").hide(); // Initially hide all buttons
jQuery('.show-image').hover(function() {
jQuery(this).find('.the-buttons').fadeIn(1500); // use .find() !
}, function() {
jQuery(this).find('.the-buttons').fadeOut(1500); // use .find() !
});
});
Try it out with this jsFiddle
HTML: - Something like this
<div class="show-image">
<img src="http://i.stack.imgur.com/egeVq.png" />
<input class="the-buttons" type="button" value=" Click " />
</div>
CSS: - Something like this. Yours will likely be different.
div {
position: relative;
float:left;
margin:5px;}
div input {
position:absolute;
top:0;
left:0; }
Put the image and the button in the same div, then put the mouseover/mouseout events on the div. Than whether your mouse is over either the button or the image, it will still be over the div.
Also I am not sure if mouseenter(...).mouseout(...) will work. I always use hover(..., ...)