Hey I can hide my divs but my problem is if I reload my page I always see the hidden div for one second.
Do someone know how to fix that?
To tackle this kind of issue, you need to have the <div> with an attribute hidden or something in the inline. Then you need to hide it with JS and the remove the inline thing.
$(function () {
$(".hide").hide().removeClass("hide");
});
.hide {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hide">I am not shown</div>
Method 2: Using hidden attribute.
$(function () {
$(".hide").hide().removeAttr("hidden");
});
.hide {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div hidden>I am not shown</div>
Method 3: Using hidden attribute and .prop().
$(function () {
$(".hide").hide().prop("hidden", false);
});
.hide {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div hidden>I am not shown</div>
In the CSS that you apply to your div, add:
display:none;
So the div will be loaded but invisible. When you need to you it, you can do as you are doing now
Just add hidden attribute to your div and it should fix your problem then remove it by javascript when you want to show it
$(document).ready(function() {
$('#myDiv').hide();
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="myDiv"><p>hello</p></div>
</body>
Yes you can create the div by javascript.
var div = document.createElement("Div");
var text = document.createTextNode("this is my Div")
div.appendChild(text);
document.body.appendChild(div);
<body>
</body>
Related
I would like to change the style of another inside a html element using javascript.
I have used the below code to change the current html element.
<p onmouseover="this.style.color = 'black;">This text should be changed</p>
<h1>How to change this element when hovered on p element</h1>
I would like to change the other element's style inside the p tag using javascript.
can anyone help?
Using CSS you can achieve the same
<style>
p:hover + h1 {
background-color : red
}
</style>
This should be what you're after (not my work) - check out the fiddle link ...
<html>
<body>
<span id="div1" style="color:black;" onmouseover="stext()" onmouseout="htext()">TEXT1</span><p />
<hr color="black" />
<span id="div2" style="color:red;" onmouseover="htext()" onmouseout="stext()">Text2</span>
</body>
http://jsfiddle.net/FFCFy/16/
for example if you want to change the color:
<script>
document.getElementByTagName("p").style.color = "blue";
</script>
that should probably bound to an event, accordingly to what you want to do
use this :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p style="color:red;" onmouseover="ch(event)">This text should be changed</p>
<h1>How to change this element when hovered on p element</h1>
<script>
function ch(e) {
e.target.style.color = "black";
alert();
}
</script>
</body>
</html>
use with Javascript
function change(that){
document.getElementsByTagName('h1')[0].style.color="red";
}
<p onmouseover="change()">This text should be changed</p>
<h1>How to change this element when hovered on p element</h1>
use with css
p:hover + h1{
color:red;
}
<p >This text should be changed</p>
<h1>How to change this element when hovered on p element</h1>
jQuery("p").mouseover(function(){
jQuery("h1").css("color", "yellow");
});
You can easily achieve it with jQuery:
$(function() {
$('#a-element').hover(function() {
$('#b-element').css('background-color', 'yellow');
}, function() {
// on mouseout, reset the background colour
$('#b-element').css('background-color', '');
});
});
If #b comes immediately after #a, the simplest solution is in pure css:
#a:hover + #b {
background: #ccc
}
If between #a and #b are other elements, you have to use ~ like this:
#a:hover ~ #b {
background: #ccc
}
I have tried the below code to hide / show div element. Now i wanna hide the element on page load. The div element should be displayed only on clicking the button.
<style type="text/css">
#sectiontohide {
padding:20px;
background:#f0f0f0;
width:400px;
}
</style>
<script type="text/javascript">
function toggle_div(id) {
var divelement = document.getElementById(id);
if(divelement.style.display == 'none')
divelement.style.display = 'block';
else
divelement.style.display = 'none';
}
</script>
</head>
<body>
<h3>JavaScript to show/hide a Div</h3>
<button onClick="toggle_div('sectiontohide');">Click here</button> to toggle visibility of div element #sectiontohide
<br /><br />
<div id="sectiontohide">This is the div to hide with id = sectiontohide</div>
You can try this code on script block
window.onload = function () {
toggle_div("sectiontohide");
};
Just set the css to hide it
<style type="text/css">
#sectiontohide {
padding:20px;
background:#f0f0f0;
width:400px;
display:none;
}
</style>
Seeings your using inline styling, why not just set it to begin with?
<div id="sectiontohide" style="display: none;">This is the div to hide with id = sectiontohide</div>
make the div's visible hidden option.
<div id="sectiontohide" style='display:none'>This is the div to hide with id = sectiontohide</div>
Im a complete noob when it comes to JavaScript and jQuery but here we go.
I want to make a slidetoggle that shows 3 slides, 3 "snowboardtricks" when i press "toggle".
As it is now only one "trick" is shown when i press toggle, the rest is already there from the beginning.
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function()
{
$("#flip").click(function()
{
$("#panel,#panel2,#panel3").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#panel2,#panel3,#flip
{
padding:1px;
text-align:left;
color:white;
background-color:black;
border:solid 1px yellow;
}
#panel
{
padding:5px;
display:none;
}
</style>
</head>
<body>
<div id="flip">Toggle</div>
<div id="panel">Switch back 1080 double cork</div>
<div id="panel2">Frontside triple cork 1440</div>
<div id="panel3">Ollie</div>
</body>
</html>
If I'm understanding correctly, on page load you only want to display "Toggle". When you click "Toggle" you want to show the three other sections.
To do that you want to place the three other sections inside of a wrapper div, and then use slide toggle on the wrapper div instead.
Quick jsfiddle: http://jsfiddle.net/43byX/
Here is a modified version of your code:
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("#toggle").click(function() {
$("#drawer").slideToggle("slow");
});
});
</script>
<style type="text/css">
#toggle,
.panel {
padding:1px;
text-align:left;
color:white;
background-color:black;
border:solid 1px yellow;
}
#drawer {
padding:5px;
display:none;
}
</style>
</head>
<body>
<div id="toggle">Toggle Me</div>
<div id="drawer">
<div class="panel">Switch back 1080 double cork</div>
<div class="panel">Frontside triple cork 1440</div>
<div class="panel">Ollie</div>
</div>
</body>
</html>
#panel, #panel2, #panel3
{
padding:5px;
display:none;
}
You are in essence hiding only the div whose id is panel. But the other two div's are visible. Those need to be hidden as well. This way when you toggle all three will have their displays turned to true.
On a side note is there a reason you are creating your own toggle? It might be faster to use twitter bootstrap which already comes with it. See This
Correct me if I'm wrong, but it seems what you're trying to do can be more easily accomplished using accordion.
Quick jFiddle example here. Click the headers to see the effects.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#flip" ).accordion({
collapsible: true,
active: false
});
});
</script>
</head>
You can erase the active code if you want one of the panes to be open when the page loads, and you can erase the collapsible line if you want one of the panes to always remain open.
and then the html layout:
<div id="flip">
<h3>Switch back 1080 double cork</h3>
<div><p>some text or whatevs here</p></div>
<h3>Frontside triple cork 1440</h3>
<div><p>some text or whatevs here</p></div>
<h3>Ollie</h3>
<div><p>some text or whatevs here</p></div>
</div>
Read more about accordion here.
Edit: It may be better to put the
<script>
$(function() {
$( "#flip" ).accordion({
collapsible: true,
active: false
});
});
</script>
just before the closing body tag instead of in the header. Best practices would have you put it in a separate file and link it in the header.
I think, you want to toggle that one hidden element one by one. Well, If I am not wrong, then here is the code:
$("#flip").click(function(){
var targets = $("#panel, #panel2, #panel3"),
hiddenElm = targets.filter(":hidden");
hiddenElm.slideDown();
if(hiddenElm.next().length){
hiddenElm.next().slideUp();
} else {
targets.first().slideUp();
}
});
Working jsfiddle: http://jsfiddle.net/ashishanexpert/jg2wg/
I have a div and a simple jQuery code that calls the div on an 'onlclick' event and properly hides on 'onmouseout' event. The problem is when I put a text or a link inside this div and move a cursor over the text / link in this div - it triggers out() function effect and dissappears - even if the cursor is still inside the div. Why is that so ? Thanks for comments.
<script src="js/jquery.js"></script>
<style type="text/css">
#sample {
position:relative;
width:500px;
height:200px;
background-image:url(images/img.png);
background-repeat:repeat-x;
}
</style>
</head>
<body>
<a href="javascript:show();" >link</a>
<div id="sample" onmouseout="out()">THIS IS TEXT</div>
<script type="text/javascript">
$(document).ready(function() {
$("#sample").hide();
});
function show() {
$("#sample").fadeIn('slow');
}
function out() {
$("#sample").fadeOut('slow');
}
</script>
</body>
</html>
Use mouseenter and mouseleave.
In the document ready function add this
jQuery("#sample").mouseleave(out);
and remove the onmouseout code from the HTML markup.
remove JavaScript code from HTML
and try this.
$(function(){
$("#sample").hide();
$("a").click(function() {
$("#sample").fadeIn('slow');
return false;
});
$("#sample").mouseout(function() {
$("#sample").fadeOut('slow');
});
})();
Demo
Your <a> element is inside the #sample element, so running fadeOut on #sample will hide it, and everything inside it.
To keep the <a> you need to place it outside #sample in the html.
Oooh, no I get it, try this instead of the inline stuff:
$("#sample").hide();
$("a").mouseenter(function() {
$("#sample").fadeIn('slow');
});
$("#sample").mouseleave(function() {
$("#sample").fadeOut('slow');
});
Here's a Fiddle, not the way I would do it, but the closest I could get to your example: http://jsfiddle.net/GkSGz/
<html lang="en">
<head>
<style>
#thisdiv {padding:10px; margin:-15px 0 0 40px; background-color:#333; position:absolute; display:none;}
div.block {margin-top:10px; width:200px;}
div#thisdiv a {color:#fff;}
</style>
</head>
<body>
<div id ="one" class="block">one</div>
<div id="thisdiv">hello</div>
<div id ="two"class="block">two</div>
<div id ="three"class="block">three/div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$('#one').hover(function() {
$('#thisdiv').fadeIn(400);
});
$('div:not(#thisdiv)').mouseleave(function() {
$('#thisdiv').fadeOut(400)
});
});
</script>
</body>
</html>
#thisdiv doesn't fadeOut. I could have used the following, but it only fades out if the cursor mouse outs of #thisdiv. Is there any way i can solve this so when the cursor navigates away from anyway, the div still fade out.
$('#thisdiv').mouseleave(function() {
$('#thisdiv').fadeOut(400)
});
I couldn't figure out what's why jquery's :not selector is not doing what I wanted to.
Am i using it wrongly?
1 - You need to use mouseover, not hover for the first binding:
$('#one').mouseover(function() {
$('#thisdiv').fadeIn(400);
});
hover accepts two function parameters (mouseover/mouseout).
2 - Your closing div tag at the end of your markup is broken (missing a <):
<div id ="three"class="block">three/div> <-- here
I tested your code having made the above modifications, and it seems to work as you want it to (if I've understood correctly). Test it here.
if you are going to explicitly set the time, you will need to pass it in as a hash parameter. Otherwise you can use 'slow', 'fast' or the default which is 400.
$('#my_button').mouseleave(function(){ $(this).fadeOut({duration:1000}) })