Activate internal links within JS roundabout

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

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

#16 google_interview  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 27-December 13

Re: Activate internal links within JS roundabout

Posted 05 February 2014 - 09:18 AM

View Postandrewsw, on 05 February 2014 - 07:24 AM, said:

The ST1 and ST2 elements aren't initially visible in the page. If you click the image for MT then it does jump down to that section.


Yes - because as per default I want the image and description for MT to be shown!

View Postandrewsw, on 05 February 2014 - 07:24 AM, said:

I'll guess that when you click an image in the roundabout you want it to not only jump to the section with that id, but also to change the content below, as your Project-links currently do. This was not clear from your request simply to "jump to anchor text".


Yes - exactly - this is what I want to do. Sorry for the confusion.

View Postandrewsw, on 05 February 2014 - 07:24 AM, said:

You'll need to hook up clicking the images to the tabs feature, possibly using class-names.


Sorry - could you perhaps elaborate on that? By providing an example/pseudocode?
Was This Post Helpful? 0
  • +
  • -

#17 google_interview  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 27-December 13

Re: Activate internal links within JS roundabout

Posted 05 February 2014 - 01:21 PM

View PostJackOfAllTrades, on 05 February 2014 - 07:11 AM, said:

Best guess: hook the appropriate Roundabout event -- probably focus -- and update the content according to the focused element.



Could you please elaborate on this? I am unsure as to what you are suggesting to do. :nottalkingtoyou: :dozingoff:
Was This Post Helpful? 0
  • +
  • -

#18 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2884
  • View blog
  • Posts: 9,566
  • Joined: 12-December 12

Re: Activate internal links within JS roundabout

Posted 05 February 2014 - 01:46 PM

Did you read the tabs.js file? How much do you know about Javascript and jQuery?

It should be pretty easy to make use of:
    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;
    });
   });

  }
 }

I would probably copy and paste it and create a tabs_pics object/feature.

I don't intend to do this for you. If you don't have the skills necessary then you can either study or employ someone.

This post has been edited by andrewsw: 05 February 2014 - 03:47 PM

Was This Post Helpful? 0
  • +
  • -

#19 google_interview  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 27-December 13

Re: Activate internal links within JS roundabout

Posted 19 February 2014 - 08:36 AM

Sorry for the really late reply - I had got held up with various interviews :dozingoff:

Thanks for the hint, andrewsw!


I did exactly as you said:

tabs.js:

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

    var th=$(this),
     tContent=$('.tab-content',th),
     navA=$('ul#myRoundabout 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;
    });
   });

  }
 }

Inside the roundabout html snippet:

            <div id="gallery" class="tabs_pics">
              <ul id="myRoundabout">
                <li><a href="#MT"><img src="images/MT_showcast.jpg" alt=""></a></li>
                <li><a href="#ST2"><img src="images/ST2_showcast.jpg" alt=""></a></li>
                <li><a href="#ST1"><img src="images/ST1_showcast.jpg" alt=""></a></li>
              </ul>
            </div>


Inside the script-tags:

<script type="text/javascript">Cufon.now();</script>
<script type="text/javascript">
$(document).ready(function () {
    $('#myRoundabout').roundabout({
        shape: 'square',
        minScale: 0.93, // tiny!
        maxScale: 1, // tiny!
        easing: 'easeOutExpo',
        clickToFocus: 'true',
        focusBearing: '0',
        duration: 800,
        reflect: true
    });
    tabs.init();
    tabs_pics.init();
    // for lightbox
    if ($("a[rel^='prettyPhoto']").length) {
        $(document).ready(function () {
            // prettyPhoto
            $("a[rel^='prettyPhoto']").prettyPhoto({
                theme: 'light_square'
            });
        });
    }
});
</script>
</script>

And still - no effect! :nottalkingtoyou:
Instead - the roundabout stopped rotating!!

What am I doing wrong? :surrender:

This post has been edited by andrewsw: 19 February 2014 - 11:23 AM
Reason for edit:: Removed previous quote

Was This Post Helpful? 0
  • +
  • -

#20 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 404
  • View blog
  • Posts: 1,720
  • Joined: 30-April 10

Re: Activate internal links within JS roundabout

Posted 19 February 2014 - 10:32 AM

In the code you posted above you have two closing script tags at the bottom.

Also why does this have a document.ready inside of a document.ready?
if ($("a[rel^='prettyPhoto']").length) {

        $(document).ready(function () {

            // prettyPhoto

            $("a[rel^='prettyPhoto']").prettyPhoto({

                theme: 'light_square'

            });

        });
}


Was This Post Helpful? 0
  • +
  • -

#21 google_interview  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 27-December 13

Re: Activate internal links within JS roundabout

Posted 19 February 2014 - 10:42 AM

You are right! Fixing the brackets however is still not helping to solve the issue!

<script type="text/javascript">Cufon.now();</script>
<script type="text/javascript">
$(document).ready(function () {
    $('#myRoundabout').roundabout({
        shape: 'square',
        minScale: 0.93, // tiny!
        maxScale: 1, // tiny!
        easing: 'easeOutExpo',
        clickToFocus: 'true',
        focusBearing: '0',
        duration: 800,
        reflect: true
    });
    tabs.init();
    tabs_pics.init();
    });
    // for lightbox
    if ($("a[rel^='prettyPhoto']").length) {
        $(document).ready(function () {
            // prettyPhoto
            $("a[rel^='prettyPhoto']").prettyPhoto({
                theme: 'light_square'
            });
        });
    }

</script>
</script>

This post has been edited by andrewsw: 19 February 2014 - 11:22 AM
Reason for edit:: Please stop quoting the previous post

Was This Post Helpful? 0
  • +
  • -

#22 google_interview  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 27-December 13

Re: Activate internal links within JS roundabout

Posted 20 February 2014 - 03:35 AM

So - I removed the second redundant document.ready() invocation and the current functionality is as before. But the hook-up is still not working :dontgetit:


<script type="text/javascript">Cufon.now();</script>
<script type="text/javascript">
$(document).ready(function () {
    $('#myRoundabout').roundabout({
        shape: 'square',
        minScale: 0.93, // tiny!
        maxScale: 1, // tiny!
        easing: 'easeOutExpo',
        clickToFocus: 'true',
        focusBearing: '0',
        duration: 800,
        reflect: true
    });

    tabs.init();
    tabs_pics.init();
  
    // for lightbox
    if ($("a[rel^='prettyPhoto']").length) {
            // prettyPhoto
            $("a[rel^='prettyPhoto']").prettyPhoto({
                theme: 'light_square'
            });
    }
  });
</script>
</script>

Was This Post Helpful? 0
  • +
  • -

#23 google_interview  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 27-December 13

Re: Activate internal links within JS roundabout

Posted 21 February 2014 - 03:18 PM

I would be really grateful for a hint! Please help me out here, guys! I've been stuck on this problem for months now! :dontgetit:
Was This Post Helpful? 0
  • +
  • -

#24 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2884
  • View blog
  • Posts: 9,566
  • Joined: 12-December 12

Re: Activate internal links within JS roundabout

Posted 21 February 2014 - 03:37 PM

Are there any errors in your console?

Based on your post #19
  $('.tabs_pics').each(function(){

.tabs_pics appears to be a single element, so each() isn't really appropriate:
   var th=$(this),
    tContent=$('.tab-content',th),

.tab-content isn't within .tabs_pics..?
    navA=$('ul#myRoundabout a',th)

   navA.click(function(){

navA would be a collection, so each() would be needed.

You also still have an incorrect closing script-tag at the bottom.

I haven't looked in detail, so I may be wrong in some aspect(s), but I think you need to examine the code again, line by line. Also use the debugging features of your browser, using console.log() or even just some alerts, to discover where it goes wrong.
Was This Post Helpful? 1
  • +
  • -

#25 google_interview  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 27-December 13

Re: Activate internal links within JS roundabout

Posted 22 February 2014 - 08:16 AM

Hey andrew! Thanks for your response!

The updated version of the site is online and all the errors can be observed from there.

Here is an extract from the logs - can't find anything suspicious!

Quote

15:57:54.143 reflow: 0.49ms
15:57:54.143 reflow: 0.25ms
15:57:57.592 reflow: 0.38ms function _calcMouseTargetRect, tabbrowser.xml line 4883
15:57:57.592 reflow: 0.17ms
15:57:57.593 reflow: 0.42ms
15:57:57.682 Use of getPreventDefault() is deprecated. Use defaultPrevented instead. jquery-1.5.2.js:2720
15:57:58.077 reflow: 0.14ms function _calcMouseTargetRect, tabbrowser.xml line 4883
.....
15:58:15.092 reflow: 0.15ms function jQuery.cssHooks[name].get, jquery-1.5.2.js line 5910
15:58:16.332 reflow: 0.16ms
15:58:39.930 POST https://mail.google..../0/channel/bind [HTTP/1.1 200 OK 95ms]
.....
15:59:05.335 reflow: 0.17ms function jQuery.expr.filters.hidden, jquery-1.5.2.js line 6095
.....
16:02:39.923 POST https://mail.google..../0/channel/bind [HTTP/1.1 200 OK 105ms]
16:03:06.859 OpenGL compositor Initialized Succesfully.
Version: 2.1 NVIDIA-1.6.36
Vendor: NVIDIA Corporation
Renderer: NVIDIA GeForce 320M OpenGL Engine
FBO Texture Target: TEXTURE_2D



This is the latest version of tabs.js using your suggestions:

/* ------------------------------------------------------------------------
	Do it when you're ready dawg!
------------------------------------------------------------------------- */

	

	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(){
   $('.tabs_pics') : function(){

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

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

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

  }
 }
 
 
 
 tabs2 = {
  init : function(){
   $('.tabs2').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;
    });
   });

  }
 }


As for some of your comments:

View Postandrewsw, on 21 February 2014 - 03:37 PM, said:

   var th=$(this),
    tContent=$('.tab-content',th),

.tab-content isn't within .tabs_pics..?


I think that is correct as it is .tab-content is the content which is supposed to be changed. It doesn't have to be within .tabs_pics. The class .tab-content is assigned to the 3 different articles, e.g.

              <article class="col2 pad_left1 tab-content" id="MT">
                <h2>Estimation of shape, illumination and reflectance from a single image</h2>

            <div class="pad">
              	<p>This work studied the reconstruction of three variables that constitute a scene, given a single image: shape, illumination and reflectance. We commenced with a comprehensive study of related literature. We then examined and evaluated state-of-the-art work. Further, we proposed a new model, which builds on this work and performs joint optimization of the objective function over the entire space of independent variables. We tested our model on pure and noisy synthetic data as well as images acquired in a real-world setting. Our method is modular and thus allows for incorporating intuitive user-driven input into the optimization scheme.</p>
              	<span class="col3">
            		<strong>
            		Duration<br>
              		Institution<br>
              		Key achievements<br><br><br><br><br>
              		Methods<br><br><br>
              		Implementation
              		</strong>
              	</span>
              		July 2012 - February 2013<br/>
              		Computer Vision Laboratory, ETH Zurich<br/>
              		Demonstrated upto 10% superiority of our model on noisy images as compared to state-of-the-art and stability with respect to various initialization conditions (e.g. ground truth). In contrast to competing studies, we tested our model on images acquired from the real-world - visually plausible results were obtained.<br/>
              		Shape, illumination and reflectance priors, L-BFGS optimization, spherical harmonics rendering, iterative display of estimation process in GUI<br/>
              		MATLAB
             </div>
              </article>





View Postandrewsw, on 21 February 2014 - 03:37 PM, said:

You also still have an incorrect closing script-tag at the bottom.


Not sure which ones you are referring to. All open brackets are closed as well - I double-checked.


The script-tags within index.html are as before in ADDITION to tabs_pics.init():

<script type="text/javascript">Cufon.now();</script>
<script type="text/javascript">
$(document).ready(function () {
    $('#myRoundabout').roundabout({
        shape: 'square',
        minScale: 0.93, // tiny!
        maxScale: 1, // tiny!
        easing: 'easeOutExpo',
        clickToFocus: 'true',
        focusBearing: '0',
        duration: 800,
        reflect: true
    });

    tabs.init();
    tabs_pics.init();
  
    // for lightbox
    if ($("a[rel^='prettyPhoto']").length) {
            // prettyPhoto
            $("a[rel^='prettyPhoto']").prettyPhoto({
                theme: 'light_square'
            });
    }
  });
</script>
</script>

This post has been edited by andrewsw: 22 February 2014 - 08:38 AM
Reason for edit:: Removed previous quote

Was This Post Helpful? 0
  • +
  • -

#26 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2884
  • View blog
  • Posts: 9,566
  • Joined: 12-December 12

Re: Activate internal links within JS roundabout

Posted 22 February 2014 - 08:40 AM

tContent=$('.tab-content',th)

This jQuery syntax looks for '.tab-content' inside whatever th refers to.

You have two closing script tags:
</script>
</script>

but there is only one open - and they cannot be nested anyway.
Was This Post Helpful? 1
  • +
  • -

#27 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2884
  • View blog
  • Posts: 9,566
  • Joined: 12-December 12

Re: Activate internal links within JS roundabout

Posted 22 February 2014 - 08:45 AM

There is an error reported in the browser's console "unexpected token : " at line 32 in tags.js, this line:

   $('.tabs_pics') : function(){

and a further error that 'tabs' is not defined, although this might be connected to the preceding error.

Did you not discover these errors in the console? If you don't know how to use the console there are links in my signature.
Was This Post Helpful? 0
  • +
  • -

#28 google_interview  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 27-December 13

Re: Activate internal links within JS roundabout

Posted 22 February 2014 - 10:02 AM

I removed the redundant </script> tag and changed the 'th' variable as follows:

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

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

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

  }
 })



I did not see any error before in the browser console, but now I have installed the Firebug plugin and I obtain the following error (after making the changes above):

Quote

ReferenceError: tabs_pics is not defined
http://testbedforwebsites.co.nf/
Line 224


Am I using the console correctly now?

<script type="text/javascript">Cufon.now();</script>
<script type="text/javascript">
$(document).ready(function () {
    $('#myRoundabout').roundabout({
        shape: 'square',
        minScale: 0.93, // tiny!
        maxScale: 1, // tiny!
        easing: 'easeOutExpo',
        clickToFocus: 'true',
        focusBearing: '0',
        duration: 800,
        reflect: true
    });

    tabs.init();
    tabs_pics.init();   // this is line 224
  
    // for lightbox
    if ($("a[rel^='prettyPhoto']").length) {
            // prettyPhoto
            $("a[rel^='prettyPhoto']").prettyPhoto({
                theme: 'light_square'
            });
    }
  });
</script>



I don't see why the initialization is not working ?

This post has been edited by google_interview: 22 February 2014 - 10:14 AM

Was This Post Helpful? 0
  • +
  • -

#29 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2884
  • View blog
  • Posts: 9,566
  • Joined: 12-December 12

Re: Activate internal links within JS roundabout

Posted 22 February 2014 - 10:54 AM

  $('.tabs_pics') : function(){

This is still wrong and so Google Chrome has the same errors I mentioned in my previous post.

Do you know why it is wrong? I'm not even sure what you are attempting to do with this line.
Was This Post Helpful? 0
  • +
  • -

#30 google_interview  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 27-December 13

Re: Activate internal links within JS roundabout

Posted 22 February 2014 - 11:53 AM

Perhaps I should have copy-pasted the .each format from before (since there is only one element it will run once anyways!).

So, I checked out the following links:
Link 1
Link 2

And this is my new implementation:

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

  }


Now I am getting an error on the console saying that the function tabs is ill-defined and therefore tabs.init() cannot be invoked! :w00t:
Was This Post Helpful? 0
  • +
  • -

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