Here is my code, which does not show any error, but don't go to href location either.
Code works when I change href to "www.google.com". Why it does not work for same page link?
<form>
<a href="#DivIdToScroll">
<div id="btnLink" onClick="generateReport();"> Generate </div>
</a>
</form>
<script>
function generateReport()
{
window.location.href = '#DivIdToScroll';
}
</script>
I prepared a code snippet from the code you provided. I just made a long container, and inserted a div with the Id "DivIdToScroll" in the lower part. It seems to be working alright. You may have used a class instead of Id. Hope it helps.
function generateReport() {
window.location.href = '#DivIdToScroll';
}
.longContainer {
height: 1000px;
background: #eee;
}
.justTakingSpace {
height: 600px;
margin: 2px;
background: #ddd;
}
<div class="longContainer">
<form>
<a href="#DivIdToScroll">
<div id="btnLink" onClick="generateReport();">Generate</div>
</a>
</form>
<div class="justTakingSpace"></div>
<div id="DivIdToScroll">Oh you're here at "#DivIdToScroll". hello hello.</div>
</div>
Without Animation
function generateReport() {
window.location.href = '#DivIdToScroll';
}
<form>
<a href="#DivIdToScroll">
<div id="btnLink" onClick="generateReport();"> Generate </div>
</a>
<div style="height:500px"> </div>
<div id="DivIdToScroll">Go to link</div>
<div style="height:500px"> </div>
</form>
With Animation
function generateReport() {
$('html, body').animate({
scrollTop: $("#DivIdToScroll").offset().top
}, 1000);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<a href="#DivIdToScroll">
<div id="btnLink" onClick="generateReport();"> Generate </div>
</a>
<div style="height:500px"> </div>
<div id="DivIdToScroll">Go to link</div>
<div style="height:500px"> </div>
</form>
You can try this set of code, it has animation too.
<div id="DivIdToScroll">Go to link</div>
Here jquery code
$("#DivIdToScroll").click(function(){
$('html, body').animate({
scrollTop: $("#scroll_div").offset().top
}, 1000);
});
and here is the content div
<div id="scroll_div">Content</div>
Related
I have two containers, one is a page of link blocks and a have another container hidden. In the hidden container there is articles that link to the main pages link blocks. So user "clicks" LINK ONE in the main container which then hides the main container, shows the originally hidden container and ONLY displays the id article it is linked to. There is then a "back to library" button which will take you back to the main container and set everything back to square one. I have it working at the moment but I'm not sure if it is the right way to achieve this? I know there is no right or wrong and if it works, it works but just wondering for peace of mind. Thanks :)
CODEPEN: https://codepen.io/mDDDD/pen/ZEObRdR
HTML:
<div class="container--article-blocks" id="articleBlocks">
<div class="article-block">
<a class="show-article" href="#articleOne">LINK ONE</a>
</div>
<div class="article-block">
<a class="show-article" href="#articleTwo">LINK TWO</a>
</div>
<div class="article-block">
<a class="show-article" href="#articleThree">LINK THREE</a>
</div>
</div>
<!-- articles -->
<div class="container--articles" id="articles" style="display: none;">
back to Library
<div id="articleOne" class="article-block-articles">One</div>
<div id="articleTwo" class="article-block-articles">Two</div>
<div id="articleThree" class="article-block-articles">Three</div>
</div>
jQuery:
$('.show-article').on('click', function (e) {
e.preventDefault();
var id = $(this).attr('href');
$(id).show().siblings('div').hide();
$('#articleBlocks').fadeOut();
setTimeout(function () {
$('#articles').fadeIn();
}, 500);
});
$('.back-to-library').on('click', function (e) {
e.preventDefault();
$('#articles').fadeOut();
setTimeout(function () {
$('#articleBlocks').fadeIn();
}, 500);
});
Consider using the callback for .fadeOut() to then call .fadeIn(). Nothing wrong with that you did, this will just ensure the item is faded out before executing further code.
$(function() {
$('.show-article').on('click', function(e) {
e.preventDefault();
var id = $(this).attr('href');
$(id).show().siblings('div').hide();
$('#articleBlocks').fadeOut(500, function() {
$('#articles').fadeIn();
});
});
$('.back-to-library').on('click', function(e) {
e.preventDefault();
$('#articles').fadeOut(500, function() {
$('#articleBlocks').fadeIn();
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container--article-blocks" id="articleBlocks">
<div class="article-block">
<a class="show-article" href="#articleOne">LINK ONE</a>
</div>
<div class="article-block">
<a class="show-article" href="#articleTwo">LINK TWO</a>
</div>
<div class="article-block">
<a class="show-article" href="#articleThree">LINK THREE</a>
</div>
</div>
<!-- articles -->
<div class="container--articles" id="articles" style="display: none;">
back to Library
<div id="articleOne" class="article-block-articles">One</div>
<div id="articleTwo" class="article-block-articles">Two</div>
<div id="articleThree" class="article-block-articles">Three</div>
</div>
You can make the visibility: hidden; after an event!
Actual example
document.getElementById("XXX").style.visibility = "hidden";
But actually, your project is just fine!
For more info, go here https://www.w3schools.com/jsref/prop_style_visibility.asp
This explains the HTML DOM visibility property!
Dears am trying to change div background-image using jquery on click as shown in code below its working on all browsers except IE.....help please
<div id="section1" class="section111">
<div class="container">
<div style="width: 100%; z-index: 999999999;" class="ServicesTitle">
<p class="Main_TitaleServices">SERVICES & SOLUTIONS</p>
<p class="slogan">Full Solutions for a Perfect Business </p>
</div>
<div id="title-underline" style="margin-bottom: -30px;">
<img src="../../App_Themes/ThemeEn/Images/title-underline.png">
</div>
<div class="firstrow">
<div class="col-lg-3 divServices ">
</div>
</div>
</div>
</div>
here is the script
<script>
$(function () {
$("#WebsiteDevelopment").click(function () {
$("#section1").css("background-image", "url(/App_Themes/ThemeEn/Images/webdevelopment.jpg !important")
/
});
$("#btnWebsiteDevelopment").click(function () {
$("#section1").css("background-image", "url(/App_Themes/ThemeEn/Images/section1bg.png")
});
});
</script>
Try setting background instead of background-image.
<script>
$(function () {
$("#WebsiteDevelopment").click(function () {
$("#section1").css("background", "url(/App_Themes/ThemeEn/Images/webdevelopment.jpg !important")
/
});
$("#btnWebsiteDevelopment").click(function () {
$("#section1").css("background", "url(/App_Themes/ThemeEn/Images/section1bg.png")
});
});
</script>
Or use pure javascript approach,
document.getElementById('section1').backgroundImage = "url('url(/App_Themes/ThemeEn/Images/webdevelopment.jpg !important')";
I want to create a div that when clicked on, pops open another div and scrolls down to it.
Here's my take on it but it is not working. What is the correct way?
html
<div class="image">
<img src="https://dotcms.com/contentAsset/image/47ffbc9c-f224-47a2-ba6c- 0fedb202dbe9/diagram1/filter/Scale/scale_w/500/scale_h/800">
</div>
<div id="box" style="display:none;"></div>
jquery
$(document).ready(function() {
$('.image').click(function() {
$('#box').slideToggle("fast");
$('html, body').animate({
scrollTop: $('#box').offset().top
}, 2000);
});
});
Try scrollIntoView()
$(document).ready(function() {
$('.image').click(function() {
$("#box").show()
$('#box').get(0).scrollIntoView()
});
});
#box{background-color:#000;height:100px;display:block;width:100%;}
.mage{display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="image">
<img src="https://dotcms.com/contentAsset/image/47ffbc9c-f224-47a2-ba6c-0fedb202dbe9/diagram1/filter/Scale/scale_w/500/scale_h/800">
</div>
<div id="box" style="display:none;">
</div>
You need to remove display:none inline css and add display:none to external css of #box div. here is the updated fiddle
<div id="box">
</div>
#box{background-color:#000;height:100px;display:none;width:100%;}
I made this script, and despite one oddity, it works fine. It's hiding/showing the parent of div element with a class containing specific content. The problem when I press my <a> elements, that act as buttons, they "filter" the divs, but it leaves the first comment <a>? If I change the element do a <div> instead no problem, but with an <a> element it behaves weirdly? Is this just a bug or?
here is a JSFiddle: https://jsfiddle.net/g1puxhs7/2/
HTML:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<a class='viewBtn'>Published<a>
<a class='viewBtn'>Completed<a>
<a class='viewBtn'>Created<a>
<div class="orders" id="orders">
<div class="row">
<div class="status">
Completed
</div>
<a>Comment</a>
</div>
<div class="row">
<div class="status">
Completed
</div>
<a>Comment</a>
</div>
<div class="row">
<div class="status">
Completed
</div>
<a>Comment</a>
</div>
</div>
<style>
.row {
width: 200px;
margin: 10px;
background: #ccc;
padding: 4px;
}
</style>
SCRIPT:
//--Filter by Status--//
$('.viewBtn').click(function() {
var txt = $(this).text();
$('.status:contains("' + txt + '")').parent().toggle();
$(this).toggleClass('down');
});
The problem is with your links:
<a class='viewBtn'>Published<a>
<a class='viewBtn'>Completed<a>
<a class='viewBtn'>Created<a>
You have 6 opening a tags, instead of 3 opening and 3 closing tags.
This is why the browser adds closing a tags in your script in a bunch of places, one of them in your first div—and then your whole DOM tree looks different than what you want.
Your markup needed to be cleaned up. Here is your markup cleaned up. Also, i find it best to add href for you anchor tags, and then you can comment them out with #, or you can add javascript:void(0). If you use the # approach, in your JS, you can add e.preventDefault();
HTML Cleaned:
<div>
<a class='viewBtn' href="#">Published</a>
<a class='viewBtn' href="#">Completed</a>
<a class='viewBtn' href="#">Created</a>
</div>
<div class="orders" id="orders">
<div class="row">
<div class="status">
Completed
</div>
<a class="stuff" onclick="Comment">Comment</a>
</div>
<div class="row">
<div class="status">
Completed
</div>
<a class="stuff">Comment</a>
</div>
<div class="row">
<div class="status">
Completed
</div>
<a class="stuff">Comment</a>
</div>
</div>
JS with preventDefault():
$('.viewBtn').click(function(e) {
e.preventDefault();
var txt = $(this).text();
$('.status:contains("' + txt + '")').parent().toggle();
$(this).toggleClass('down');
});
This is what I got so far, and I can't seem to get it to work..
It's the image that has the id="hap_text" that I want to be displayed when you click on the other image.
<script>
$(function() {
$('.touch_bg #touch_hap').click(function(e) {
e.preventDefault();
$('#hap_text').toggleClass('hidden');
});
});
</script>
<div class="container touch_bg">
<div>
<img id="touch_hap" src="img/info/lefttouch.png">
<img id="hap_text" class="hidden" src="img/info/habitattext.png">
</div>
</div>
and the css is:
.hidden {
display: none;
}
Uncaught ReferenceError: $ is not defined
Don't forget to include jQuery. Otherwise, your code looks fine.
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
$(function() {
$('.touch_bg #touch_hap').click(function(e) {
e.preventDefault();
$('#hap_text').toggleClass('hidden');
});
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container touch_bg">
<div>
<a href="#">
<img id="touch_hap" src="img/info/lefttouch.png">
</a>
<img id="hap_text" class="hidden" src="img/info/habitattext.png">
</div>
</div>