0

Hi am really trying to find someone to help me find the solution to this problem.

I have two html pages and a js page with jquery

page1.html

<a id="test1"></a>

page2.html

<div class="navdown">
        <ul id="top-menu"> 

            <li id="one" class="active1"> 
                <a id="t1">
                </a> 
            </li>

            <li id="two">
                <a id="t2">
                </a>
            </li> 




                <li id="three">  
                <a id="t3">
                </a> 
            </li>





        </ul>
    </div>

test.js

$('#test1').on('click', function(){


$('#one').removeClass('active1');


$('#three').addClass('active1');


});

I am trying so that when in page1 (#test1) is clicked on page2 (#one) the class active1 is removed and then added to (#three).

I understand because these are different html pages/dom the js wont be able to run as expected but I have been looking up different solutions to this problem. But havent been able to find one is simple. Is there a way to select a id across multiple doms and work with them in the same jquery function?

hillodesign
  • 45
  • 1
  • 11
  • The long and short is no. You should just go ahead and delete this question as it isn't possible. – Trasiva Apr 20 '17 at 22:34
  • You can set cookies for that! Watch for the cookie in the other files and do the actions based on the cookie! – Felix Haeberle Apr 20 '17 at 22:38
  • 1
    @FelixHäberle, for a POC project or something that will be used in an enclosed environment.. maybe.. but otherwise cookies aren't reliable enough for the wild web. – l.varga Apr 20 '17 at 22:41

3 Answers3

0

The only correct answer is no, you cannot use JS for persistent DOM changes for different pages without any backend.

l.varga
  • 851
  • 6
  • 14
0

I agree that the literal answer to this question is no, you can't do that.

I'd suggest rethinking the structure of what you're trying to do. Does it really need to be two separate pages?

If it really does, for whatever reason, there's a few hacks you could use to accomplish what you're going for.

Like Felix Haberle suggested, you could set a cookie on page1 when the button is clicked and then read that cookie on page2. Or you could set a variable in local storage instead. Local storage is probably a better option. Here's a good summary of cookies vs local storage.

Or, another hack is to utilize the hash in the url. If the button is clicked on page1, you can navigate to page2.html#buttonClicked instead of just page2.html. Then on page2, check for the presence of the hash value - window.location.hash.

Please note though that these are just hacks. What you're trying to do is manage state in the browser. Client side state cannot be reliably maintained across multiple page loads. I'd really recommend rethinking how you're structuring things. But not everything in this world is beautiful and if you're totally ok with weird hacks, then these will do the trick! ;)

Community
  • 1
  • 1
heylookltsme
  • 124
  • 6
0

Parent and window.frame functions to allow cross-DOM selecting. To test if this works the code needs to be uploaded to a live server. Test will not work local.

HTML

<script type="text/javascript">
                             /* ------------------- Remove active1 class interframe function ------------------- */
                             window.frames['#iframe1'].proFunction()
                             function proFunction(){
                               $('#test1000').removeClass('active1');
                               $('#test3000').addClass('active1');
                             }
                             function resumeFunction(){
                               $('#test1000').removeClass('active1');
                               $('#test2000').addClass('active1');
                             }
                             /* ------------------- End ------------------- */
</script>

<!-- Navbar -->
<div class="navdown hidden">
    <ul id="top-menu" style="margin:0 0 0 0">
        <li class="active1" id="test1000">
            <a data-height="100%" data-src="test_page_1.html" data-width="100%" id="test1"><i class="lnr lnr-file-empty"><small style="font-size: 65%"> Page 1</small></i></a>

        </li>
        <li id="test2000">
            <a data-height="100%" data-src="test_page_2.html" data-width="100%" id="test2"><i class="lnr lnr-file-empty "><small style="font-size: 65%"> Page 2</small></i></a>
        </li>
        <li id="test3000">
            <a data-height="100%" data-src="test_page_3.html" data-width="100%" id="test3"><i class="lnr lnr-file-empty"><small style="font-size: 65%"> Page 3<small></i></a>
        </li>
    </ul>
</div>
<!-- iFrame -->

<div id="main" >
<iframe frameborder="0" height="100%" id="iframe1" name="iframe1" scrolling="yes" src="test_page_1.html" 
style="display:block;position:absolute;" width="100%"></iframe> 
<!-- Scripts -->

JS

$("#link2").click(function(){
parent.proFunction();
});

$("#link3").click(function(){
parent.proFunction();
});

$('.navdown ul li').on('click', function(){
$('ul li.active1').removeClass('active1');
$(this).addClass('active1');
});

$("#test1").on('click', function() {

var src = $(this).data('src'),
    width = $(this).data('width'),
    height = $(this).data('height');
$('#iframe1').css({
    width: width,
    height: height
}).attr('src', src);

});

$("#test2").on('click', function() {

var src = $(this).data('src'),
    width = $(this).data('width'),
    height = $(this).data('height');
$('#iframe1').css({
    width: width,
    height: height
}).attr('src', src);

});

$("#test3").on('click', function() {

var src = $(this).data('src'),
    width = $(this).data('width'),
    height = $(this).data('height');
$('#iframe1').css({
    width: width,
    height: height
}).attr('src', src);

});

Test Page 1

<a href="test_page_2.html" id="link2">Go to test page 2</a>

<a href="test_page_3.html" id="link3">Go to test page 3</a>
hillodesign
  • 45
  • 1
  • 11