I would like the content of a DIV to change when either of these conditions is met:
Clicking on a text link above the DIV
Hovering over the DIV itself
The DIV content should revert to its original state when the cursor is moved away from the div or the link.
My problem is this: The DIV content does not change back to the original after the link is clicked and the cursor is moved away. The onclick event seems to negate the onmouseout event.
If you have any suggestions, please post revised code to codepen; it would be greatly appreciated! Here is the code.
<html><head><title>Title</title>
<SCRIPT LANGUAGE="JavaScript">
function changeContent1()
{
document.getElementById("myDiv").innerHTML='<a href="#" onmouseout="changeContentBack1()" style="text-decoration:none"><div style="background:black;color:white;width:450px;height:203px">THIS TEXT APPEARS ON CLICK OR ROLLOVER</div>'
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function changeContentBack1()
{
document.getElementById("myDiv").innerHTML='<div style="background:red;color:white;width:450px;height:203px">ORIGINAL TEXT</div>'
}
</SCRIPT>
</head>
<body>
<div style="width:450px;float:left">This is the section title. <a href="#" onclick="changeContent1()">Click for more info<br><br>
<div id="myDiv"><a href="#" onmouseover="changeContent1()" style="text-decoration:none">
<div style="background:red;color:white;width:450px;height:203px">ORIGINAL TEXT
</div></a>
</div>
</div>
</body>
</html>
I added onmouseout="changeContentBack1()" to your link on your code pen and it works fine.
http://cdpn.io/ciHek
http://codepen.io/anon/pen/ciHek
On a side note you might want to clean up your HTML and validate it. I'm seeing a lot of missing or out of place tags.
Related
I was hoping someone could help...I'm new to Jquery ....all I want to achieve is a click through on a hyperlinked image but this occurs when a completely separate div on another part of the page is clicked on rather than the hyperlinked image I just mentioned. .......the hyperlinked image needs to be invisible also. In case anyone is wondering why I need this ....it's because I want my own custom button rather than the standard one that comes with a CMS that I'm using and it can't be changed....it's basically a work around the owners of the system suggest.
Here's what I thought would work
<style>
#my-custom-button{
margin: 0 auto;
width: 200px
}
#the-standard-button{
display : none
}
</style>
<div id="my-custom-button">
<img src="../images/order-now.png">
</div>
<div id="the-standard-button">
<?php
proprietary PHP here that renders the standard button
?>
</div>
<script type="text/javascript">
<!--
$(function(){
$("#my-custom-button").click(function(){
$("#the-standard-button").click();
});
});
-->
</script>
The whole
<?php propiertary blah blah ?>
makes it hard to decipher but my guess is that the handler is being generated for whatever is being created by php, i.e. the php generates
<button id="phpButton">
blah
</button>
and then a handler like
$("#phpButton").click(....)
Notice that the handler is NOT on "#the-standard-button". So, you need make sure that you are using the correct selector when calling the click() in $("#my-custom-button").click(...)
Check out this jsFiddle. Notice which secondary click event is fired.
I'm not sure I understand your question perfectly, if what you want is that when You click on one button it will act as though the other was clicked.
Here is a solution that will work IF the default button is also an anchor tag (<a>)
HTML:
<div id="newButton">
<img src="/theimage.jpg"/>
</div>
<div id="oldDiv">
<img src"oldImage.png"/>
</div>
JQuery:
jQuery(document).ready(function($){
$("#oldDiv").hide();
$("#newDiv > a").click(function(){
window.location = $("#oldDiv>a").attr("href");
});
});
Ok so i have a problem i have simple html website filled with text and i want to make button which has an onclick function that makes my window(the position at the moment of the page) locate an element with id="element" and change the window position.like the ctr+F function but withouth highlighting the element
<head>
<script>
function h1Location(){
enter code here
}
</script>
</head>
<body>
<header >
<div style="position:fixed;">
<input type="button" onclick="h1Location()" />
</div>
</header>
<nav>
<h1 id="firstHeader" >TEXT</h1>
</nav>
</body>
So in this case i simply want to make the button locate and change PageView to 'TEXT'(h1 with id="firstHeader" so instead of scrolling up or down it immediately do it for you.
In page anchor links:
Click here to see some lower down part the author thinks is important.
<!--REST OF PAGE-->
<a name="placeToScroll">Here's that lower down part!</a>
This is the code for a simple pinterest button.
<div class="myPinterestButton">
<a href="//www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest"
data-pin-do="buttonPin"
data-pin-config="none">
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
</a>
</div>
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
None of the content is iframed. The pinterest button ends up being the <a> tag with some additional data attributes (thanks to the pinit.js which adds it at runtime).
Here's the thing I don't undrestand. If I click the button it works fine. But if I want to trigger a click on it (for example click a different element on the page and use jQuery to do $(".myPinterestButton a").trigger("click") it doesn't work.
Here's a jsfiddle: http://jsfiddle.net/h42vK/2/
What's going on here please?
You can use click event for wrapper div .myPinterestButton instead .myPinterestButton a
$(".myPinterestButton").trigger("click")
I have the following code:
<script type="text/javascript" src="/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
$('#toggle1').click(function() {
$('.toggle1').toggle();
return false;
});
});
</script>
Text Before <a href="http://www.google.com">link Text After</a><br /><br />
<div class="toggle1" style="display:none;">More Text Here</div>
The problem with this is that it is not valid HTML and even though the toggle1 link and the link inside toggle1 link both work, and the "Text Before" is clickable, the "Text After" is not clickable and does not toggle.
Have you any suggestions how to fix it so that "Text After" is also clickable so that toggle would work?
Thank you all!
The browser will automatically inject a closing tag into you code to make it valid. That's why you are not able to click on the 'text after'. Please inspect through some element inspectors, then you can understand what is happening.
See how your code was rendered in browser
So why cant you make it like this?
HTML
Text Before
link
Text After<br /><br />
<div class="toggle1" style="display:none;">More Text Here</div>
JAVASCRIPT
$(function() {
$('.toggler').click(function() {
$('.toggle1').toggle();
return false;
});
});
CONTACT
<script>
$('#toggle01').click(function() {
$('#contact').slideToggle("slow");
return false;
});
</script>
<div id="contact">
123-456<br />
</div>
<iframe id="player" src="http://www.youtube.com/embed/..."></iframe>
Everything works here, but when I click on link CONTACT and div#contact becomes visible/invisible, the iframe flashes and blinks.
How can I avoid this blinking ?
The problem seems to be the sliding animation. While your div is animated the iframe moves down and causes to be rerendered.
You could place your div after the iframe or encapsulate it within another div with a fixed height.
For example:
<div style="height:50px;">
<div id="contact">
123-456<br />
</div>
</div>
But this will leave a blank area above your iframe.
You script looks correct and i dont see any reason why it should blink. However Can you try the below script ? Add e.preventDefault();
<script>
$('#toggle01').click(function(e) {
e.preventDefault();
$('#contact').slideToggle("slow");
return false;
});
</script>