I am a beginner at javascript and I wrote a simple code trying to show/hide a div simply by clicking on another div. If someone can check the code I wrote and correct me I would be really grateful. Thanks in advance.
$('DivBlue').ready(function() {
$('DivRed').on('click', function(){
document.getElementById('DivBlue').style.display = 'block';
});
});
.DivRed{
position:absolute;
top:0;
left:0;
width:15vw;
height:15vw;
background-color:red;
}
.DivBlue{
position:absolute;
display:none;
right:0;
bottom:0;
width:15vw;
height:15vw;
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DivRed"></div>
<div class="DivBlue"></div>
You can do this with the toggle() function in the jQuery library. toggle() with no arguments is a to shortcut show/hide an DOM element.
Also, it is good practice to use .ready() on the document instead of an element of the DOM.
So, your JS code should look like:
$(document).ready(function() {
$('.DivRed').on('click', function(){
$('.DivBlue').toggle();
});
});
DEMO
Toggle does the trick in jQuery:
$(document).ready(function() {
$('.DivRed').on('click', function() {
$('.DivBlue').toggle();
});
});
Replace your JavaScript with this and it will surely work.
$(document).ready(function() {
$('.DivRed').click(
function() {
$('.DivBlue').toggle();
});
});
You are making few mistakes here,
You cant get a div by a class name with document.getElementById() method. You need to use document.getElementsByClassName() method.
document.getElementsByClassName() return a NodeList. You can't apply CSS for a NodeList. So you need to select a Node to apply CSS using document.getElementsByClassName('DivBlue')[0]
To work your code should be changed as
$('DivBlue').ready(function() {
$('DivRed').on('click', function(){
document.getElementsByClassName('DivBlue')[0].style.display = 'block';
});
});
Related
I want to add a click event to an iframe. I used this example and got this:
$(document).ready(function () {
$('#left').bind('click', function(event) { alert('test'); });
});
<iframe src="left.html" id="left">
</iframe>
But unfortunately nothing happens.
When I test it with another element (e.g. a button), it works:
<input type="button" id="left" value="test">
You could attach the click to the iframe content:
$('iframe').load(function(){
$(this).contents().find("body").on('click', function(event) { alert('test'); });
});
Note: this will only work if both pages are in the same domain.
Live demo: http://jsfiddle.net/4HQc4/
Two solutions:
Using :after on a .iframeWrapper element
Using pointer-events:none; one the iframe
1. Using :after
use a transparent overlay ::after pseudo element with higher z-index on the iframe's wrapper DIV element. Such will help the wrapper to register the click:
jQuery(function ($) { // DOM ready
$('.iframeWrapper').on('click', function(e) {
e.preventDefault();
alert('test');
});
});
.iframeWrapper{
display:inline-block;
position:relative;
}
.iframeWrapper::after{ /* I have higher Z-index so I can catch the click! Yey */
content:"";
position:absolute;
z-index:1;
width:100%;
height:100%;
left:0;
top:0;
}
.iframeWrapper iframe{
vertical-align:top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iframeWrapper">
<iframe src="http://www.reuters.tv/" frameBorder="0"></iframe>
</div>
2. Using pointer-events:none;
Clicks are not handleable from outside the iframe from an external resource (if the iframe is not in your domain).
You can only create that function inside your 'called into iframe' page, not from within the iframe-hosting page.
How to do it:
You can wrap your iframe into a div
make the click "go through" your iframe using CSS pointer-events:none;
target clicks with jQuery on your wrapping DIV (the iframe parent element)
jQuery(function ($) { // DOM ready
$('.iframeWrapper').on('click', function(e) {
e.preventDefault();
alert('test');
});
});
.iframeWrapper{
display:inline-block;
position:relative;
}
.iframeWrapper iframe{
vertical-align:top;
pointer-events: none; /* let any clicks go trough me */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iframeWrapper">
<iframe src="http://www.reuters.tv/" frameBorder="0"></iframe>
</div>
NOTA BENE:
No clicks will be registered by the iframe element, so a use-case would be i.e: if by clicking the iframe you want to enlarge it full screen.... Etc...
I got it to work but only after uploading it to a host. I imagine localhost would work fine too.
outer
<html>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
var myFrame = document.getElementById("myFrame");
$(myFrame.contentWindow.document).find("div").on("click", function () { alert("clicked"); });
});
</script>
<body>
<iframe id="myFrame" src="inner.htm"></iframe>
</body>
</html>
inner
<html>
<head>
<style>
div {
padding:2px;
border:1px solid black;
display:inline-block;
}
</style>
</head>
<body>
<div>Click Me</div>
</body>
</html>
Pure Javascript
Not my solution but only this works well.
let myConfObj = {
iframeMouseOver : false
}
window.addEventListener('blur',function(){
if(myConfObj.iframeMouseOver){
console.log('Wow! Iframe Click!');
}
});
document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseover',function(){
myConfObj.iframeMouseOver = true;
});
document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseout',function(){
myConfObj.iframeMouseOver = false;
});
$(document).ready(function () {
$('#left').click(function(event) { alert('test'); });
});
<iframe src="left.html" id="left">Your Browser Does Not Support iframes</iframe>
The script would have to be ran entirely from the iframe. I would recommend a different method of calling content, such as php.
iframes aren't really worth the hassle.
The actual problem is that, the click event does not bind to the DOM of the iframe and bind() is deprecated, use .on() to bind the event. Try with the following codes and you will find the borders of the iframe clickable getting that alert.
$('#left').on('click', function(event) { alert('test'); });
Demo of that Issue
So how to get it done?
How you should do is, create a function on iframe page, and call that function from that iframe page.
Hi guys I was making a javascript function for dismissing or hiding a div Ive search through the internet and found some answers but it does not apply on my code
Here is my code:
<script>
function Displayout()
{
$("#siteicon").mouseout(function () {
$("#map_tooltip").hide("drop", { direction: "down" }, "slow");
});
}
</script>
And here is the div that will trigger the function
<div id='siteicon' style="background-image:url('src/images/redbutton.png');margin-top:0px;margin-left:-8px;height:10px;width:10px;background-repeat:no-repeat;" onmouseover="displayData();" onmouseout="Displayout();"></div>
UPDATE:
and here is the id of the div I want to hide
<div id='infocontainer'></div>
Thank you in advance
Seems like there is syntax wrong with your hide() method. Try this:
function displayData()
{
$("#map_tooltip").show("slow");
}
function displayOut()
{
$("#map_tooltip").hide("slow");
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<div id='siteicon' style="background-color:grey;margin-top:0px;margin-left:-8px;height:20px;width:60px;background-repeat:no-repeat;" onmouseover="displayData();" onmouseout="displayOut();">SiteIcon</div>
<div id='map_tooltip' hidden="true">Should be hidden on mouseout of #siteicon</div>
The parameters for hide are wrong, it's giving error "Uncaught TypeError: n.easing[this.easing] is not a function". You can use "slow" to slow up the hiding effect but you can't specify the direction. You order is wrong as well. Please have a look at JSFiddle for Demo and api.jquery.com for for hide function.
You don't need onmouseout since you are using JQuery, and there seems to be a problem in the hide() of yours, so try removing the parameter inside.
$('#test').mouseout(function() {
$(this).hide();
})
#test {
height: 200px;
width: 200px;
background-color:pink}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">content</div>
I have a problem with my code.
I would like to build a button menu where it will be focused when it clicks firstly and it will not when it is clicked the second time.
This is my code :
<style>
.mybutton:focus{
background-color:red;
}
</style>
<script>
$(document).ready(function() {
$("#menu-button").click(function(){
if($(this).is(":focus")){
$(this).removeClass("focus");
}
else
$(this).addclass("focus");
});
});
</script>
It doesn't work.
Thanks.
Instead of your if statement, use .toggleClass("focus")
$(document).ready(function() {
$("#menu-button").click(function(){
$(this).toggleClass("focus");
});
});
I'm a complete noob when it comes to javascript. Would there be anyway to change an image after it is clicked, some way to trigger a js function to change the css. It would have to be triggered by an event and something other than onclick, onfocus probably.
<style>
#pic {
width:100px;
height:100px;
}
</style>
</head>
<body>
<img src='nope.jpg' id='pic' onclick="mouseOver()"></img>
<script type='text/javascript'>
function mouseOver() {
document.getElementById('pic').style.width="400px";
document.getElementById('pic').style.height="400px";
}
</script>
try this...
function mouseOver() {
document.getElementById('image').style.height = "400px";
}
First i edited the question , because the function was not defined correctly .
Second :
to access the height property of any element , you should use style.height , and should add "px" to the value.
please spend more time searching for answers , instead of posting a new question.
Change the JS to this:
var image = document.getElementById('image');
function mouseOver() {
image.style.height="600px";
}
image.onclick = mouseOver;
Setting values you can use directly style attribute, but remember that asking for them is a greater problem:
Please refer to this one:
Get a CSS value with JavaScript
This should work
<style>
#pic {
width:100px;
height:100px;
}
</style>
</head>
<body>
<img
width="100"
onmouseOver="this.width=400; this.height=400"
onclick="this.width=100"
alt="RESIZE IMAGE"
id='pic'
src='nope.jpg'
/>
just copy and edit the image tag code as needed
I have the following setup:
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
I'm trying to change all the background color of all of them at the same time, when the mouse is hovering over any one of them. I tried:
<script type="text/javascript">
$(function() {
$('.parent').hover( function(){
$(this).css('background-color', 'gray');
},
function(){
$(this).css('background-color', 'red');
});
});
</script>
But, the color is not "showing through" the children <div>s.
Is there a way to choose the descendents of "this". I have many of these sets in a row, so I think I need to use "this" so I don't have the call each parent by id. I'm thinking something like this:
<script type="text/javascript">
$(function() {
$('.parent').hover( function(){
$(this "div").css('background-color', 'gray');
},
function(){
$(this "div").css('background-color', 'red');
});
});
</script>
But, can't quite get it to work - all the examples on jquery.com use the id selector... none use "this".
Thanks a lot!
If you're not targeting IE6, no need to use JavaScript, pure CSS will do the trick:
.parent, .child {
background-color:red;
}
.parent:hover, .parent:hover .child {
background-color:gray;
}
have you already tried .children()?
jQuery API
you can use .find()
$(this).find('div').css('background-color','red');
http://api.jquery.com/children/
try this:
$(function() {
$('.parent').hover( function(){
$(this).children("div").css('background-color', 'gray');
},
function(){
$(this).children("div").css('background-color', 'red');
});
});
demo: http://jsfiddle.net/zt9M6/
You're using $() with mixed arguments - it's either got to be a string as a selector (div), or just a DOM element (this). To select all divs within the context of this, try calling it like this:
<script type="text/javascript">
$(function() {
$('.parent').hover( function(){
$("div", this).css('background-color', 'gray');
},
function(){
$("div", this).css('background-color', 'red');
});
});
</script>
From http://api.jquery.com/jQuery/#jQuery1
Do it with CSS classes
.parent .child{
background-color: red;
}
.hoverstyle .child{
background-color: gray;
}
$(.parent')hover(function() {
$(this).addClass("hoverstyle"):
},
function(){
$(this).removeClass("hoverstyle");
});