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>

You should pass php variable like $page in every page to enable or disable slider it's efficient and proper way to manage content. Use javascript to hide or show slider is not a proper way. — Dipak
– Dipak, Commented Oct 17, 2017 at 5:59
@Dipakchavda he has a single page so he doesn't need php but a js solution — madalinivascu
– madalinivascu, Commented Oct 17, 2017 at 6:00

madalinivascu · Accepted Answer · 2017-10-17 05:59:51Z

1

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();
}

answered Oct 17, 2017 at 5:59

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dipak · Accepted Answer · 2017-10-17 09:12:45Z

1

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.

edited Oct 17, 2017 at 9:12

answered Oct 17, 2017 at 6:45

Dipak

2,3065 gold badges26 silver badges56 bronze badges

3 Comments

user2030942 Over a year ago

I actually do want to hide the slider entirely. Your solution didn't work for me :(

Dipak Over a year ago

@user2030942: You use the disabled word in your question that is why I gave you a former answer but now I modified my answer with new one.

Dipak Over a year ago

@user2030942 Otherwise I post current solution very early.

user2030942 · Accepted Answer · 2017-10-17 09:36:23Z

1

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);
    }
});

answered Oct 17, 2017 at 9:36

user2030942

2437 silver badges26 bronze badges

Comments

A. Iglesias · Accepted Answer · 2017-10-17 05:58:46Z

0

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();

    ..............

answered Oct 17, 2017 at 5:58

A. Iglesias

2,6752 gold badges12 silver badges24 bronze badges

Collectives™ on Stack Overflow

Disabling Javascript element doesn't work with php DOM

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related