I simply want to swap contents of two divs when pressing a button using AJAX.
I made a simple jsfiddle just to demonstrate what I mean.
So I want to swap A with B and B with A at the same time (while the red and green box stay at the same place) using onclick.
.box1 {
border: 2px solid green ;
}
.box2 {
border: 2px solid red ;
}
<div id="rank1" class="box1">
B
</div>
<div id="rank2" class="box2">
A
</div>
use jquery to do this
include jquery js in html head tag
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
and following script to change the content
<script>
$(document).ready(function(){
$('#sbutton').click(function() {
var div1_value = $( "#rank1" ).html();
var div2_value = $( "#rank2" ).html();
$( "#rank1" ).html(div2_value);
$( "#rank2" ).html(div1_value)
});
});
</script>
add a button in your html body
<input type="button" id="sbutton" value="Change"/>
Related
Can I change background color of paragraph when I click on a link in the page.
Go to P4
<p id="p4">I'm P4</p>
what I need write in css to get -
p { background-color: yellow; }
You can not change the attribute of an element by clicking on another element with CSS, but it can be with JavaScript. Just add <script> tag to end of your <body> and onclick() to <a>:
<body>
Go to P4
<p id="p4">I'm P4</p>
<script>
function changeColor() {
document.getElementById("p4").style.backgroundColor = "yellow";
}
</script>
</body>
Not sure if this is possible but I'm trying to display a div if another div which doesn't share the same parent is hovered.
The html looks something like this:
<div class="test">
<div class="hover-me"><p>Hover</p></div>
</div>
// some other content here
<div class="hover-content">
<p>hovered content</p>
</div>
I've tried using
.test:hover + .hover-content {
display: block;
}
But I think this only works if there's no other content in-between? Any suggestions?
Use javascript to listen to the onmouseover event, or jquery to handle the hover event on one and change the display attribute of the other. Using jquery
<script>
$(document).ready(function () {
$(".hover-me").hover(function () {
$(".hover-content").show();
}, function() {
$(".hover-content").hide();
});
});
</script>
If you don't want to use jquery, change your html like so
<div class="test">
<div class="hover-me"
onmouseover="document.getElementById('hover-content').style.display = 'block';"
onmouseout="document.getElementById('hover-content').style.display = 'none';">
<p>Hover</p></div>
</div>
// some other content here
<div class="hover-content" id="hover-content">
<p>hovered content</p>
</div>
notice that I added an id attribute to the hover-content div.
Try this, i think it will help you :
<script>
$(document).ready(function () {
$( ".hover-me" ).mouseenter( function () {
$( ".hover-content" ).show();
}).mouseout(function () {
/*anything you want when mouse leaves the div*/
} );
});
</script>
So you want to display the .hover-content when you hover the test. You can try the following solution. If it does not work, you gotta use javascript to check for the mouseover event. Hope it helps!
.test:hover ~ .hover-content {
display: block;
}
<div></div>
<div> paragraph</div>
<div>paragraph1</div>
I want to change the background color of blank div without changes in Html part. and it should be change only through css
Can any one help me out?
you can use
div:nth-child(2)
[HTML]
<div>
paragraph
</div>
<div>
paragraph1
</div>
[CSS]
div:nth-child(2) {
background-color: pink;
}
https://jsfiddle.net/hass/3f0b0jv1/
Keeping in mind div should be completely empty without any space also.
<div></div>
div:empty
{
background-color:red
}
Try This
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("div:eq(0)").css("color", "red");
$("div:eq(1)").css("color", "yellow");
$("div:eq(2)").css("color", "pink");
});
</script>
I'm trying to make draggable items contained in a position:absolute DIV.
It works well when dragged over a div declared earlier in the code, but this item will never appear over a [position:absolute] div declared later in the code, even when setting lower Z-index to this DIV...
Here's an example
$(function(){
$(".myClass").draggable({stack:".bg"});
}(jQuery));
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div style="position:absolute;background-color:#3FF;width:200px;height:200px;border:1px solid #000;left:0px;top:0px;z-index:10;">
<div class="myClass" style="position:absolute;left:10px;top:10px;width:70px;height:70px;background-color:#0F6;border:1px solid #000;z-index:100;">Draggable</div>
</div>
<div style="position:absolute;background-color:#FFC;width:200px;height:200px;border:1px solid #000;left:205px;top:0px;z-index:10;">
<div class="myClass" style="position:absolute;left:10px;top:10px;width:70px;height:70px;background-color:#0F6;border:1px solid #000;z-index:100;">Draggable</div>
</div>
<div style="position:absolute;background-color:#9CF;width:200px;height:200px;border:1px solid #000;left:205px;top:205px;z-index:10;"></div>
Any idea of how i could solve that issue ?
Thx.
The problem is your z-index on the parents elements. One easy way to resolve your problem is to simply remove them.
Or you can manipulate them on start and stop so the draggable parent is always at the top.
See here with manipulating on start and stop, but removing it from your HTML should also work.
$(function() {
$(".myClass").draggable({
stack: ".myClass",
start: function(e, ui) {
ui.helper.parent().css('z-index', 30);
},
stop: function(e, ui){
ui.helper.parent().css('z-index', 10);
}
});
}(jQuery));
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div style="position:absolute;background-color:#3FF;width:200px;height:200px;border:1px solid #000;left:0px;top:0px;z-index: 10;">
<div class="myClass" style="position:absolute;left:10px;top:10px;width:70px;height:70px;background-color:#0F6;border:1px solid #000;z-index:100;">Draggable</div>
</div>
<div style="position:absolute;background-color:#FFC;width:200px;height:200px;border:1px solid #000;left:205px;top:0px;z-index: 10;">
<div class="myClass" style="position:absolute;left:10px;top:10px;width:70px;height:70px;background-color:#0F6;border:1px solid #000;z-index:100;">Draggable</div>
</div>
<div style="position:absolute;background-color:#9CF;width:200px;height:200px;border:1px solid #000;left:205px;top:205px;z-indx: 10;"></div>
I have two divs div1 and div2. I want div2 to be automatically hidden but when i click on preview div then div2 to be made visible and div1 to hide. This is the code i tried but no luck :(
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div2").hide();
$("#preview").click(function() {
$("#div1").hide();
$("#div2").show();
});
});
</script>
<div id="div1">
This is preview Div1. This is preview Div1.
</div>
<div id="div2">
This is preview Div2 to show after div 1 hides.
</div>
<div id="preview" style="color:#999999; font-size:14px">
PREVIEW
</div>
Make sure to watch your selectors. You appear to have forgotten the # for div2. Additionally, you can toggle the visibility of many elements at once with .toggle():
// Short-form of `document.ready`
$(function(){
$("#div2").hide();
$("#preview").on("click", function(){
$("#div1, #div2").toggle();
});
});
Demo: http://jsfiddle.net/dJg8N/
This is an easier way to do it. Hope this helps...
<script type="text/javascript">
$(document).ready(function () {
$("#preview").toggle(function() {
$("#div1").hide();
$("#div2").show();
}, function() {
$("#div1").show();
$("#div2").hide();
});
});
<div id="div1">
This is preview Div1. This is preview Div1.
</div>
<div id="div2" style="display:none;">
This is preview Div2 to show after div 1 hides.
</div>
<div id="preview" style="color:#999999; font-size:14px">
PREVIEW
</div>
If you want the div to be hidden on load, make the style display:none
Use toggle rather than click function.
Links:
JQuery Tutorials
http://docs.jquery.com/Main_Page
http://www.w3schools.com/jquery/default.asp (W3Schools)
http://thenewboston.org/list.php?cat=32 (Video Tutorials)
http://andreehansson.se/the-basics-of-jquery/ (Basic Tutorial)
JQuery References
http://api.jquery.com/
http://oscarotero.com/jquery/
You are missing # hash character before id selectors, this should work:
$(document).ready(function() {
$("#div2").hide();
$("#preview").click(function() {
$("#div1").hide();
$("#div2").show();
});
});
Learn More about jQuery ID Selectors
The second time you're referring to div2, you're not using the # id selector.
There's no element named div2.
$(document).ready(function() {
$('#div2').hide(0);
$('#preview').on('click', function() {
$('#div1').hide(300, function() { // first hide div1
// then show div2
$('#div2').show(300);
});
});
});
You missed # before div2
Working Sample
At first if you want to hide div element with id = "abc" on load and then toggle between hide and show using a button with id = "btn" then,
$(document).ready(function() {
$("#abc").hide();
$("#btn").click(function() {
$("#abc").toggle();
});
});