Disabling Javascript element doesn't work with php DOM
Question
I have an index.php page that loads content to a div based on user click. This index.php page includes a slider at the top. All the different pages/content areas should have the slider, except the About Us link. When I click on About Us, I want the slider to be disabled, and then put back when I click on any other link.
See for yourself: home
Here is the code that loads the content for each page:
<body class="body">
<!--turn into markup-->
<div id="container">
<div id="header">
<?php include ( "header.php")?> //this header.php file contains the slider I want to hide when About Us page is active
</div>
<div id="contentarea">//here is where the content for each page is loaded</div>
</div>
<div id="footer-container">
<?php include ( "footer.php")?>
</div>
// ...js scripts... //
<script type="text/javascript">
//this javascript code loads the slider and the content in #contentarea
//Slider
$('#slider').nivoSlider({
effect: 'random',
animSpeed: 2000,
pauseTime: 6000,
randomStart: true,
directionNav: false,
controlNav: false,
controlNavThumbs: false
});
//Jquery loader
function getHash() {
return window.location.hash
}
$(".menuitem").on("click", function (e) {
page = this.href.replace("#", "") + ".html",
hash = $(this).prop("hash");
$('#contentarea').load(page, function () {
if (page.match("home.html")) {
history.pushState('', document.title, window.location.pathname);
} else {
location.hash = hash;
}
var divHeight = $('#content').height();
$('#contentarea').height(divHeight);
$("html, body").animate({
scrollTop: $(this).height()
}, "7000");
});
});
//on pageload
history.pushState
var hash = getHash();
if (hash) {
$("a[href='" + hash + "']").trigger("click");
} else {
$("a[href='#home']").trigger("click");
}
</script>
Here is the code for the slider div in header.php:
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/slide-1.jpg" />
<img src="images/slide-2.jpg" />
<img src="images/slide-3.jpg" />
<img src="images/slide-4.jpg" />
</div>
</div>
</div>
And here is my js code for the about us content section... I tried adding some code there to disable the slider on page load but for some reason, it isn't working.
<div id="content" class="cms-editable">
<div id="page-title">ABOUT US.</div>
<!-- Here is the content for the About Us section -->
</div>
<script>
$(document).on('click','.close_box',function(){
$(this).parent().fadeTo(300,0,function(){
$(this).remove();
});
jQuery(document).ready(function ($) {
// disable slider THIS CODE DOESN'T WORK AS EXPECTED
$(this).parents("#slider").children().attr("disabled","disabled");
});
</script>
4 answers
solution1
1 ACCPTED 2017-10-17 05:59:51
Use the hashchange event to show/hide the slider
$(window).on( 'hashchange', function(e) {
var hash = window.location.hash;
if (hash == '#aboutus') {
$('#slider').hide();
} else {
$('#slider').show();
}
solution2
1 2017-10-17 06:45:09
I have modified my answer.
//If you wanted to show
var type = window.location.hash.substr(1);
if (type === 'aboutus') {
$('#slider').hide();
} else {
$('#slider').show();
}
Hope my guideline may help to you.
solution3
1 2017-10-17 09:36:23
I fixed this by using a combination of the things ya'll recommended. Here's my code:
$(window).on( 'hashchange', function(e) {
var hash = window.location.hash;
if (hash == '#aboutus') {
$('#slider').hide();
} else {
$('#slider').show(200);
}
});
solution4
0 2017-10-17 05:58:46
You can add this to the beginning of the click function...
$(".menuitem").on("click", function (e) {
if ($(this).attr('id') == 'aboutus')
$('div#wrapper').hide();
else
$('div#wrapper').show();
..............
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.