I'm trying to make a div appear (if not already visible) and be scrolled to a specific anchor. I found this answer and try to use it but it looks like it doesn't work well...
https://stackoverflow.com/a/7513110/3703099
My code : http://jsfiddle.net/0sq2rfcx/9/
As you can see, when you click on button it scroll to the anchor, but if you click again, it scroll to an other position... I would like to make it stay on the current anchor if you keep clicking the button.
Can you help me to find what I did wrong plz ?
$('#b1').click(function() {
$('#result').show();
$('#result').scrollTop($('#a1').offset().top);
});
$('#b2').click(function() {
$('#result').show();
$('#result').scrollTop($('#a2').offset().top);
});
$('#b3').click(function() {
$('#result').show();
$('#result').scrollTop($('#a3').offset().top);
});
#result {
display: none;
height: 200px;
overflow-y: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id='b1'>b1</button>
<button id='b2'>b2</button>
<button id='b3'>b3</button>
<button onclick="$('#result').hide();">hide</button>
<div id='result'>
<p>bla 0</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<p id='a1'>bla 1</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<p id='a2'>bla 2</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<p id='a3'>bla 3</p>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
I've just updated your jsfiddle: http://jsfiddle.net/0sq2rfcx/8/
This should work on all browsers included IE7
$('#b1').click(function () {
$('#result').show();
$("#result").animate({ scrollTop:$('#a1').parent().scrollTop() + $('#a1').offset().top - $('#a1').parent().offset().top}, "slow");
});
$('#b2').click(function () {
$('#result').show();
$("#result").animate({ scrollTop:$('#a2').parent().scrollTop() + $('#a2').offset().top - $('#a2').parent().offset().top}, "slow");
});
$('#b3').click(function () {
$('#result').show();
$("#result").animate({ scrollTop:$('#a3').parent().scrollTop() + $('#a3').offset().top - $('#a3').parent().offset().top}, "slow");
You can use position instead to scroll like one below:
DEMO HERE
$('#b1').click(function () {
$('#result').show();
$('#result').animate({
'scrollTop' : $("#a1").position().top-10 //-10 here is just to set it in view!!
});
});
Added animation for smoothness
Related
I have two div and if I resize my page less than 768px then my .tFFiltre div is moving in .tFPopup div..so everything is okay so far but after moving I don't want to make work my js function
for example if you click change background checkbox button you will see background color is chancing but if I move my div in another div than don't change background color..so I mean I don't want to make work js function
$(document).ready(function(){
$('#checkbox').change(function() {
if ($(this).is(':checked')) {
$("body").css("background","red");
} else {
$("body").css("background","white");
}
});
});
$(window).resize(function() {
if ($(window).width() < 768) {
$('.tFFiltre').appendTo('.tFPopup');
} else {
$('.tFFiltre').appendTo('.backFilter');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tFFiltre backFilter">
<h1>Hi this is my filter title</h1>
<p>and this is my article for filter</p>
<span>and I have some elements</span>
<button>html button</button>
<pre>code bla bla </pre>
<xmp>
<html>
<head></head>
<body></body>
</html>
</xmp>
<input type="checkbox" id="checkbox"> <label for="checkbox">change background
</div>
<div class="tFPopup">
<h3>.tFFiltre div will be moved here </h3>
</div>
$(document).ready(function(){
$('#checkbox').change(function() {
if ($(this).is(':checked')) {
$("body").css("background","red");
} else {
$("body").css("background","white");
}
});
});
$(window).resize(function() {
if ($(window).width() < 768) {
$('#checkbox').off();
$($('.tFFiltre')).appendTo('.tFPopup');
} else {
$('#checkbox').off();
$($('.tFFiltre')).appendTo('.backFilter');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tFFiltre backFilter">
<h1>Hi this is my filter title</h1>
<p>and this is my article for filter</p>
<span>and I have some elements</span>
<button>html button</button>
<pre>code bla bla </pre>
<xmp>
<html>
<head></head>
<body></body>
</html>
</xmp>
<input type="checkbox" id="checkbox"> <label for="checkbox">change background
</div>
<div class="tFPopup">
<h3>.tFFiltre div will be moved here </h3>
</div>
Please check the code
I have get the whole element and then appendto required position
Thanks
I have a div named Groupz and another div named vegasDetailz
Now i want, when i click on the button that is lying in first div , first div should disappear and the second div should take it's place for this purpose i have written the following jquery code
$(document).ready(function() {
$("button").click(function() {
$("#vegasDetailz").replaceWith("#Groupz");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vegasDetailz">
<input class="submitBTN getstart" name="button" type="submit" value="Get Started">
</div>
<div id="Groupz"></div>
But it is not working for me. Any ideas ?
Note: I am using php laravel 5.3
You are trying to click on $("button") but you have no button, so use $(".getstart"), since it is the id of your input.
Second your .replaceWith("#Groupz") are just trying text into the div, you have to get the element first before you can replace the entire element. Like .replaceWith($("#Groupz"))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vegasDetailz">
<input class="submitBTN getstart" name="button" type="submit" value="Get Started">
</div>
<div id="Groupz">
</div>
<script>
$(document).ready(function() {
$(".getstart").click(function(){
$("#vegasDetailz").replaceWith($("#Groupz").html("Im an replaced"));
});
});
</script>
You can remove submitBTN getstart from the div vegasDetailz then add new one to the second div Groupz:
$(document).ready(function() {
$(".getstart").click(function(){
$(".getstart").remove();
$("#Groupz").append($("<input class='getstart' name='button' type='submit' value='Get Started'>"));
});
});
#vegasDetailz {
background-color: grey;
width:500px;
height:60px;
}
#Groupz {
width:500px;
background-color:pink;
height:60px;
margin-top:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vegasDetailz">
<input class="getstart" name="button" type="submit" value="Get Started">
</div>
<div id="Groupz">
</div>
You need to use the name as you selector then use like this input[name=button] if you want to use class as your selector then use .submitBTN.
$(document).ready(function() {
$("#Groupz").hide();
$(".submitBTN").click(function() { // you can also use input[name=button] for '.submitBTN'
$("#vegasDetailz").hide();
$("#Groupz").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vegasDetailz">
<input class="submitBTN getstart" name="button" type="submit" value="Get Started">
</div>
<div id="Groupz">
Hai Another div
</div>
If you just want to show & hide the div on the button click, then try this code:
<div id="vegasDetailz">
<input class="submitBTN getstart" name="button" type="submit" value="Get Started">
</div>
<div id="Groupz" style="display:none;">Hello</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".getstart").click(function(){
$("#vegasDetailz").css('display','none');
$("#Groupz").css('display','block');
});
});
</script>
Just make the div id named Groupz hidden by default, if you don't want to show the second div in default state.
I hope, it may be helpful to you.
I have script for slideup and slide down function in jquery, and a button each of them.
both are working fine until i thought of giving the slide up from by letting the user click anywhere in the site.. i.e., when user clicks slide down button its slides down and when he click anywhere on the screen later the content slides up.
unfortunately its having a small problem of auto sliding down and sliding up when i hit slide down button.
the script as follow::
<div id="a" name="a">
</br>
<small><p id="date2"><?php echo $row2["date"]; ?></p></small>
<p><B><big><font color= #ba4a00> A:</font></B></big> <small><?php echo $row2["answer"]; ?></small></p>
</div>
<button id="showmoreless" class="hide">Hide Answers</button>
<button id="showmoreless" class="show">Show Answers</button>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".hide").hide();
$('[name="a"]').slideUp();
$(".show").click(function(e){
e.preventDefault();
$(this).parent().find('[name="a"]').slideDown();
$(this).hide();
$(this).parent().find(".hide").show();
});
$('[name="a"]').click(function(e){
e.stopPropagation();
});
$(window).click(function(e) {
console.log($(e.target));
if (!$(e.target).is('[name="a"]')) {
$('.show').show();
$('[name="a"]').slideUp();
}
});
});
</script>
Any help is Appreciated..
It slides back up straight away because both your event handlers are executing - by definition a click on your show element is also a click on the window.
To stop this happening you need stopPropagation
$(".hide").hide();
$('[name="a"]').slideUp();
$(".show").click(function(e){
e.preventDefault();
$(this).parent().find('[name="a"]').slideDown();
$(this).hide();
$(this).parent().find(".hide").show();
e.stopPropagation(); // <-- here
});
$('[name="a"]').click(function(e){
e.stopPropagation();
});
$(window).click(function(e) {
//console.log($(e.target));
if (!$(e.target).is('[name="a"]')) {
$('.show').show();
$('[name="a"]').slideUp();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="a" name="a">
<br>
<small><p id="date2">date here</p></small>
<p><big><font color= #ba4a00> A:</font></big> <small>answer here</small></p>
</div>
<button id="showmoreless" class="hide">Hide Answers</button>
<button id="showmoreless" class="show">Show Answers</button>
On click of a button I wanted to remove one of the li tag .
This is my HTML
<div class="inner-intit">
<sub class="sub">Your Favorite Restaurant</sub><br>
<li vendor_id="1">
<h6> vendor 1 at loc 1</h6>
<p>Near Cyinet ,SoftSol , Hyderabad ,Telangana </p>
<span class="inDeleteInnerSub"></span>
</li>
<input type="button" area="Madhapur" location="Office" name="btn1" class="btn btn-success buttonsearchRestaurant" value="Add Restaurant For Office">
</div>
And i tried this way
$(document).on('click', '.inDeleteInnerSub', function(event ) {
alert('sss');
if (confirm("Are You Sure Want to Delete Current Location?") == true)
{
var vendor_id = $(this).closest('li').attr('vendor_id');
alert(vendor_id);
$(this).closest('li').remove();
}
});
But I don't know why its not removing the li tag. What could be causing this?
This is my fiddle
http://jsfiddle.net/3ubrtmk4/
This will work. I have tested too.
CSS
.inDeleteInnerSub{
background:url(../images/icon-delete.png) center top no-repeat;
width:20px;
height:20px;
opacity:0.5;
}
.inDeleteInnerSub:hover{
opacity:0.8;
cursor:pointer;
}
Jquery
<script>
$(function(){
$(document).on('click', '.inDeleteInnerSub', function(event ) {
// alert('sss');
if (confirm("Are You Sure Want to Delete Current Location?") == true)
{
var vendor_id = $(this).closest('li').attr('vendor_id');
//alert(vendor_id);
$(this).closest('li').remove();
}
});
});
</script>
Html
<div class="inner-intit">
<sub class="sub">Your Favorite Restaurant</sub><br>
<li vendor_id="1">
<h6> vendor 1 at loc 1</h6>
<p>Near Cyinet ,SoftSol , Hyderabad ,Telangana </p>
<div class="inDeleteInnerSub">Delete</div>
</li>
<input type="button" area="Madhapur" location="Office" name="btn1" class="btn btn-success buttonsearchRestaurant" value="Add Restaurant For Office">
</div>
span doesnot accept height and width hence your code works if you add some text to your span so that it has some height and width to click
<span class="inDeleteInnerSub">X</span>
I want to show the buttons on hover and hide them when moused out, i tried the following code but doesnt work.
<div class="mybooks">
<div class="divbutton">
<input class="btnsubmit" type="button" value="Edit" id="edit_trivia">
<input class="btnsubmit" type="button" value="Delete" id="delete_trivia">
</div>
</div>
".$Tri_IMAGE."
".$Tri_CAPTION."
</div>";
}
?>
</div>
<!--close accordion-->
</div>
<script>
$( ".mybooks" ).mouseenter(function() {
$('.divbutton').show();
});
$( ".mybooks" ).mouseleave(function() {
$('.divbutton').hide();
});
</script>
Just hide the div first
//hide the div here
var $btn = $('.divbutton').hide()
$(".mybooks").mouseenter(function () {
$btn.show();
});
$(".mybooks").mouseleave(function () {
$btn.hide();
});
Demo: Fiddle
Or use a css rule to hide it
.divbutton {
display:none
}
Demo: Fiddle
This fiddle shows the buttons hiding (display: none;) when you hover over them. The thing is, you can't have them reappear once they're gone. There is nothing to hover over...
<div class="divButtons">
<input class="btnsubmit" type="button" value="Edit" id="edit_trivia" />
<input class="btnsubmit" type="button" value="Delete" id="delete_trivia" />
</div>
JavaScript:
$('#edit_trivia').hover(function(){
$(this).css('display', 'none');
});
$('#delete_trivia').hover(function(){
$(this).css('display', 'none');
});
You should put your javascript code in this function:
$( document ).ready(function() {
//your code
});
Your code: http://jsfiddle.net/VGJ5u/