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>
Related
I'm creating a popup which has an iframe to display content from some other website:
<div id="popup-wrapper">
<div id="iframe-wrapper">
<iframe id="register-frame" src="some url" />
</div>
</div>
I want this to be hidden by default and show up when user clicks a button, here's my jquery:
$(document).ready(function() {
$("#popup-wrapper").hide();
$("#iframe-wrapper").hide();
$("#register-frame").hide();
});
Both the outer divs disappear but the iframe does not, what am I doing wrong?
i have no error when i close the tag iframe, your syntax is not good
<iframe id="register-frame" src="some url"></iframe>
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.
I am making a div which should be hidden when the page loads, then visible once the user clicks a link. The code below works in FF / IE7 / IE8 but not in IE9, where the div is visible at all times ( without content ). Thanks in advance!
<script>
$(document).ready(function() {
$('#translateBoxen').hide();
$('#translateToggle').click(function() {
$('#translateBoxen').toggle(400);
return false;
});
});
</script> // This is the jQuery code to hide and toggle the div //
<div style="width:200px;height:100px;position:absolute;"> // Just a holder that's needed for the site
<a class="vitxtext" style="font-size:10px;" id="translateToggle" href="#">
Translate
</a>
<div style="clear:both;"></div>
<div id="translateBoxen">
// BOX CONTENT //
</div>
</div>
Why don't you hide the <div> with CSS? Just set to to display:none in your CSS, then when the toggle link is clicked for the first time it should be shown.
There is no reason why toggle() should not work in IE9, are you getting any script errors?
Late to the party, but try making a .hidden class with display:none, then hiding/showing by putting addClass('hidden') and removeClass('hidden') instead of show/hide.
I am developing a page in JSP. It has 3 components: Header, Content and Footer. I want that when this page loads the Content part should be fade in to default content i.e. the Home Page, which contains button for register, login and site credits. When user clicks register button, the content in Content part should fade out and vanish and then content of register form should fade in and get displayed. Same for other buttons, but there should not be any change in header and footer. Please help!!!
With use of jQuery... You have working example there...
I'd recommend using a JavaScript library to achieve this.
jQuery has built in fading abilities.
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
With the element initially hidden, we can show it slowly:
$('#clickme').click(function() {
$('#book').fadeIn('slow', function() {
// Animation complete
});
});
Using JQuery, you can hide a div by using a selector and the hide() method. For example:
<html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function swap_divs() {
$("#div_to_hide").hide();
$("#div_to_show").show();
}
</script>
<body>
<div id="div_to_hide">
Some text for div to hide
</div>
<div id="div_to_show" style="display: none;">
Some text for div to show
</div>
<button onClick="swap_divs();">Click me</button>
</body>
</html>
If you look at the JQuery website you can find more example and extensive documentation. Also for fading in/fading out.
I have a page with two divs, one hidden and one displayed. When I click on a link at the bottom of the page, I want the hidden div to display and the displayed div to be hidden. It works fine, but if the browser height is small (e.g., on a mobile device) the user sees the div that gets displayed scrolled all the way to the bottom.
Here is the page:
<script type="text/javascript">
function display()
{
document.getElementById('div2').style.display="block";
document.getElementById('div1').style.display="none";
}
</script>
<!-- Start of content -->
<div id="div1" style="display:block">
<h2>This is shown at the beginning</h2>
<p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p>
<p>Hello</p><p>Hello</p><p>Hello</p>
<a rel="external" href="bogus.tar.gz" onclick="display(); return true">Click here</a>
</div>
<div id="div2" style="display:none">
<h2>This is shown later</h2>
<p>Goodbye</p><p>Goodbye</p><p>Goodbye</p><p>Goodbye</p><p>Goodbye</p><p>Goodbye</p>
<p>Goodbye</p><p>Goodbye</p><p>Goodbye</p>
</div>
If I put the link at the top of the page, the problem goes away, but the flow of the page demands that the link be at the bottom of the page.
So how can I get the browser to show the top of the div once it gets displayed.
window.scrollTo(x, y)
If you want to scroll the page to the top use
window.scrollTo(0, 0)
Otherwise, change the second parameter.
hide the div1 before displaying the div2.
If it does not run, use a scrollto javascript (based on displayed div) call to fix the issue
document.getElementById('div2').scrollTop=0