Activate internal links within JS roundabout

  • (3 Pages)
  • +
  • 1
  • 2
  • 3

43 Replies - 2499 Views - Last Post: 26 February 2014 - 06:21 AM

#31 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3615
  • View blog
  • Posts: 12,439
  • Joined: 12-December 12

Re: Activate internal links within JS roundabout

Posted 22 February 2014 - 12:01 PM

var tabs=$('.tabs'),
  var tabspics=$('.tabs_pics'),

By putting a comma at the end of the first line you are continuing the var-declarations onto a second line, so the second use of var is incorrect and produces the error "Unexpected token var" in GC.

The syntax here:
navA.each(click(function(){

is incorrect as well.
Was This Post Helpful? 1
  • +
  • -

#32 google_interview  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 49
  • Joined: 27-December 13

Re: Activate internal links within JS roundabout

Posted 22 February 2014 - 12:13 PM

I had basically copy/pasted the tab code from before, so I assumed the commas were okay.
I removed the commas and added an additional loop for .each and .click :bigsmile:


 	tabs_pics = {
  init : function(){
	
	var tabs=$('.tabs')
    var tabspics=$('.tabs_pics'),
     tContent=$('.tab-content',tabs),
     navA=$('ul#myRoundabout a',tabspics)

    tContent.not(tContent.eq(0)).hide()

    navA.each.(function(){
    	$(this).click(function(){	
		     var th=$(this),
		     tmp=th.attr('href')
		     tContent.not($(tmp.slice(tmp.indexOf('#'))).fadeIn(600)).hide()
			 $(th).parent().addClass('selected').siblings().removeClass('selected');
		     return false;
	    });
    });
   };

  }

Was This Post Helpful? 0
  • +
  • -

#33 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3554
  • View blog
  • Posts: 10,333
  • Joined: 08-June 10

Re: Activate internal links within JS roundabout

Posted 22 February 2014 - 03:18 PM

line #11 is incorrect, undefined is not a property of each().
Was This Post Helpful? 1
  • +
  • -

#34 google_interview  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 49
  • Joined: 27-December 13

Re: Activate internal links within JS roundabout

Posted 23 February 2014 - 03:54 AM

Thanks for pointing that out, Dormilich!

I rectified that and also removed the additional semicolon on line #20.
No more errors!

AND FINALLY there has been an improvement! :happybday:

Check out!

Clicking on the respective images causes the body text to change
But I still have 2 issues here:
1) the roundAbout has stopped working!
2) the change in body text should also change the "highlighted in blue" link in the left panel

Any suggestions?
Was This Post Helpful? 0
  • +
  • -

#35 google_interview  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 49
  • Joined: 27-December 13

Re: Activate internal links within JS roundabout

Posted 24 February 2014 - 05:30 AM

Any ideas on how to activate the rotation again?
Would it help to place the following snippet within tabs_pics.init() ?

    $('#myRoundabout').roundabout({
        shape: 'square',
        minScale: 0.93, // tiny!
        maxScale: 1, // tiny!
        easing: 'easeOutExpo',
        clickToFocus: 'true',
        focusBearing: '0',
        duration: 800,
        reflect: true
    });

This post has been edited by google_interview: 24 February 2014 - 05:31 AM

Was This Post Helpful? 0
  • +
  • -

#36 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3615
  • View blog
  • Posts: 12,439
  • Joined: 12-December 12

Re: Activate internal links within JS roundabout

Posted 24 February 2014 - 05:50 AM

     navA=$('ul#myRoundabout a',tabspics)

    navA.each(function(){
    	$(this).click(function(){	
		     var th=$(this),
		     tmp=th.attr('href')
		     tContent.not($(tmp.slice(tmp.indexOf('#'))).fadeIn(600)).hide()
			 $(th).parent().addClass('selected').siblings().removeClass('selected');
		     return false;
	    });
    });
   }

The return false prevents the default action, which would be to follow the a-link, but it probably also cancels the roundabout's click-event.

They don't need to be a-links. They could just be images (or images in some other element) with a data-attribute containing the ids. css could be used if you want them to show the hand when pointing at them.
img { cursor: pointer; cursor: hand; }

If you change these then you could remove return false; and use jQuery's data() method, rather than attr() to obtain the id.

You might try just removing return false as the roundabout might then run and this may already cancel the following of the a-link.
Was This Post Helpful? 0
  • +
  • -

#37 google_interview  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 49
  • Joined: 27-December 13

Re: Activate internal links within JS roundabout

Posted 24 February 2014 - 06:02 AM

Removing 'return false' with no other alterations worked like a charm! :bananaman:

Hurray

But the left panel and the roundabout are not in sync, i.e. the rotation causes the body text to change, but the click on left panel does not cause a change in rotation. And after rotating, the "selected" project should be highlighted. :nottalkingtoyou:
Was This Post Helpful? 0
  • +
  • -

#38 google_interview  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 49
  • Joined: 27-December 13

Re: Activate internal links within JS roundabout

Posted 26 February 2014 - 04:22 AM

So, I tried to do the following - as done before in tabs and tabs_pics. This code snippet should change the newly defined panel content in addition to the body content. A click on the roundabout image should change the selected link in the let panel and make it blue:

.tabs ul.nav .selected a {
	color:#13c5ff;
	text-decoration:none
}


However - nothing is happening here.

var tabs=$('.tabs')
var tabspics=$('.tabs_pics'),
    pContent = $('.pad', tabs),
    navP=$('ul.nav a',tabspics)
    

    navP.each(function(){
    	$(this).click(function(){	
		     var th=$(this),
		     tmp=th.attr('href')
		     tContent.not($(tmp.slice(tmp.indexOf('#'))).fadeIn(600)).hide()
			 $(th).parent().addClass('selected').siblings().removeClass('selected');
	    });
    }); 



This is the full tabs.js file:

	tabs = {
  init : function(){
   $('.tabs').each(function(){

    var th=$(this),
     tContent=$('.tab-content',th),
     navA=$('ul.nav a',th)

    tContent.not(tContent.eq(0)).hide()

    navA.click(function(){
     var th=$(this),
     tmp=th.attr('href')
     tContent.not($(tmp.slice(tmp.indexOf('#'))).fadeIn(600)).hide()
	 $(th).parent().addClass('selected').siblings().removeClass('selected');
     return false;
    });
   });

  }
 }
 
 
 	tabs_pics = {
  init : function(){
	
	var tabs=$('.tabs')
    var tabspics=$('.tabs_pics'),
    tContent=$('.tab-content',tabs),
    navA=$('ul#myRoundabout a',tabspics)

    tContent.not(tContent.eq(0)).hide()

    navA.each(function(){
    	$(this).click(function(){	
		     var th=$(this),
		     tmp=th.attr('href')
		     tContent.not($(tmp.slice(tmp.indexOf('#'))).fadeIn(600)).hide()
			 $(th).parent().addClass('selected').siblings().removeClass('selected');
	    });
    });
    
    pContent = $('.pad', tabs),
    navP=$('ul.nav a',tabspics)
    

    navP.each(function(){
    	$(this).click(function(){	
		     var th=$(this),
		     tmp=th.attr('href')
		     tContent.not($(tmp.slice(tmp.indexOf('#'))).fadeIn(600)).hide()
			 $(th).parent().addClass('selected').siblings().removeClass('selected');
	    });
    });    
    
    
   }

  }

This post has been edited by google_interview: 26 February 2014 - 04:25 AM

Was This Post Helpful? 0
  • +
  • -

#39 google_interview  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 49
  • Joined: 27-December 13

Re: Activate internal links within JS roundabout

Posted 26 February 2014 - 04:54 AM

Ok, I just noticed a silly mistake in my code (pContent instead of tContent). Here's the correct version:

var tabs=$('.tabs')
var tabspics=$('.tabs_pics'),
    pContent = $('.pad', tabs),
    navP=$('ul.nav a',tabspics)
    

    navP.each(function(){
    	$(this).click(function(){	
		     var th=$(this),
		     tmp=th.attr('href')
		     pContent.not($(tmp.slice(tmp.indexOf('#'))).fadeIn(600)).hide()
			 $(th).parent().addClass('selected').siblings().removeClass('selected');
	    });
    }); 


Code is online again.

I think what needs to be done here now is some kind of an indexing of images. If a certain index is selected than either #MT, #ST1 or #ST2 should be highlighted.

Any hints here?
Was This Post Helpful? 0
  • +
  • -

#40 google_interview  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 49
  • Joined: 27-December 13

Re: Activate internal links within JS roundabout

Posted 26 February 2014 - 05:10 AM

Ok, I just changed a few class names within pContent as well, since

           <div class="wrapper tabs">
              <article class="col1">
                <h2>Projects</h2>
                <div class="pad">
                  <ul class="nav">
                    <li><a href="#MT">Master Thesis</a></li>
                    <li><a href="#ST2">Semester Thesis</a></li>
                    <li><a href="#ST1">Semester Thesis</a></li>
                  </ul>
                </div>
              </article>
....
</div>


Here's the correct version:

var tabs=$('.tabs')
var tabspics=$('.tabs_pics'),
    pContent = $('.col1 .pad ul.nav', tabs),
    navP=$('ul#myRoundabout a',tabspics)
    

    navP.each(function(){
    	$(this).click(function(){
		     var th=$(this),
		     tmp=th.attr('href')
			 $(th).parent().addClass('selected').siblings().removeClass('selected');
	    });
    });   


Code is online again.


Still no success :nottalkingtoyou:

Any hints here?
Was This Post Helpful? 0
  • +
  • -

#41 google_interview  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 49
  • Joined: 27-December 13

Re: Activate internal links within JS roundabout

Posted 26 February 2014 - 05:33 AM

Another (hopefully last) correction:

pContent = $('.col1 .pad ul.nav li a', tabs)

Was This Post Helpful? 0
  • +
  • -

#42 google_interview  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 49
  • Joined: 27-December 13

Re: Activate internal links within JS roundabout

Posted 26 February 2014 - 06:14 AM

So - I realized that there is no default "selected" tag in the menu, so I made that change as well:

            <div class="wrapper tabs">
              <article class="col1">
                <h2>Projects</h2>
                <div class="pad">
                  <ul class="nav">
                    <li class="selected"><a href="#MT">Master Thesis</a></li>
                    <li><a href="#ST2">Semester Thesis</a></li>
                    <li><a href="#ST1">Semester Thesis</a></li>
                  </ul>
                </div>
              </article>
....
</div>



But I am still not going where I wanted to.
Was This Post Helpful? 0
  • +
  • -

#43 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3615
  • View blog
  • Posts: 12,439
  • Joined: 12-December 12

Re: Activate internal links within JS roundabout

Posted 26 February 2014 - 06:17 AM

View Postgoogle_interview, on 26 February 2014 - 01:14 PM, said:

But I am still not going where I wanted to.

If you want further help then you'll need to clarify what stage you are currently at and ask specific questions, posting the relevant code.
Was This Post Helpful? 0
  • +
  • -

#44 google_interview  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 49
  • Joined: 27-December 13

Re: Activate internal links within JS roundabout

Posted 26 February 2014 - 06:21 AM

Okay. The site with the latest version is currently online.

As you can see - clicking on the roundAbout images causes the body text to change, but the links in the left panel should be synchronized (i.e. the "selected" link should be highlighted).

This is the current state of tabs_pics, where navP (navigation of left panel) and pContent (content of the left panel) introduce the new lines of code I have added to invoke the changes.

 	tabs_pics = {
  init : function(){
	
	var tabs=$('.tabs')
    var tabspics=$('.tabs_pics'),
    tContent=$('.tab-content',tabs),
    navA=$('ul#myRoundabout a',tabspics)

    tContent.not(tContent.eq(0)).hide()

    navA.each(function(){
    	$(this).click(function(){
		     var th=$(this),
		     tmp=th.attr('href')
		     tContent.not($(tmp.slice(tmp.indexOf('#'))).fadeIn(600)).hide()
			 $(th).parent().addClass('selected').siblings().removeClass('selected');
	    });
    });
    
    pContent = $('.col1 .pad ul.nav li a', tabs),
    navP=$('ul#myRoundabout a',tabspics)
    

    navP.each(function(){
    	$(this).click(function(){
		     var th=$(this),
		     tmp=th.attr('href')
			 $(th).parent().addClass('selected').not(this).removeClass('selected');
			 

	    });
    });    
    
    
   }

Was This Post Helpful? 0
  • +
  • -

  • (3 Pages)
  • +
  • 1
  • 2
  • 3