Activate internal links within JS roundabout

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

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

#1 google_interview  Icon User is offline

  • New D.I.C Head

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

Activate internal links within JS roundabout

Posted 02 February 2014 - 12:44 PM

Hello there! :bigsmile:


For my website, I am trying to do the following: On the upper part of my web page,
I have a roundabout of 3 images (created using java script). A click on a certain image causes the image to appear in the foreground and the remaining 2 to go to the back.

But now I want the click to also change the content of the lower part of the web page using a "#". However, a simple reference doesn't seem to work :surrender:

            <div id="gallery">
              <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>


The CSS is as follows:
.roundabout-holder {
	height:5em;
}
.roundabout-moveable-item {
	cursor:pointer;
	width:636px;
	height:478px;
	margin-top:229px;
	padding-bottom:20px
}
.roundabout-in-focus {
	cursor:auto;
}
#gallery {
	position:relative;
	height:520px
}
#gallery img {
	display:block;
	width:100%;
	height:100%
}
#gallery li {
}


This part in the html file calls necessary js files:

<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();
    // for lightbox
    if ($("a[rel^='prettyPhoto']").length) {
        $(document).ready(function () {
            // prettyPhoto
            $("a[rel^='prettyPhoto']").prettyPhoto({
                theme: 'light_square'
            });
        });
    }
});
</script>
</script>


All the JS scripts are within the attachment!

Does anyone have any idea as to how to make the references
"#MT", "#ST1" and "#ST2"
work ?

Attached File(s)

  • Attached File  js.zip (116.59K)
    Number of downloads: 33


Is This A Good Question/Topic? 0
  • +

Replies To: Activate internal links within JS roundabout

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3479
  • View blog
  • Posts: 10,020
  • Joined: 08-June 10

Re: Activate internal links within JS roundabout

Posted 02 February 2014 - 02:37 PM

Quote

But now I want the click to also change the content of the lower part of the web page using a "#". However, a simple reference doesn't seem to work

could you elaborate on that? I have no idea what that is supposed to do. (well, the default action were to jump to that anchor’s position, but I doubt that this is what you want)
Was This Post Helpful? 0
  • +
  • -

#3 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 03 February 2014 - 03:43 AM

Well - actually - YES - that is EXACTLY what I want to do!

I want the click on a certain image of the roundabout to lead to a different anchor text!

Example for anchor "MT"
      
<article class="col2 pad_left1 tab-content" id="MT">
<h2>titleOfMT</h2>
<div class="pad">adsasdfasdf</div>
</article>


This post has been edited by andrewsw: 03 February 2014 - 04:35 AM
Reason for edit:: Removed previous quote

Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3479
  • View blog
  • Posts: 10,020
  • Joined: 08-June 10

Re: Activate internal links within JS roundabout

Posted 03 February 2014 - 05:41 AM

Quote

But now I want the click to also change the content of the lower part of the web page using a "#".

the same click or a second click?


Quote

However, a simple reference doesn't seem to work

does the refrence work outside the roundabout?
Was This Post Helpful? 0
  • +
  • -

#5 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 04 February 2014 - 04:40 AM

1) Yeah. One click should have two consequences: 1) change of image in roundabout and 2) jump to anchor text

2) Yes. The reference works outside it, which is why I am surprised (check the left side bar and click on any of the project links)!

I am attaching the necessary docs so that you can see for yourself what is happening here!

Attached File(s)


This post has been edited by andrewsw: 04 February 2014 - 05:04 AM
Reason for edit:: Removed previous quote

Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3479
  • View blog
  • Posts: 10,020
  • Joined: 08-June 10

Re: Activate internal links within JS roundabout

Posted 04 February 2014 - 08:06 AM

View Postgoogle_interview, on 04 February 2014 - 12:40 PM, said:

I am attaching the necessary docs so that you can see for yourself what is happening here!

I *never* open unknown files from the net.

code tags will format long code in an appropriate way (max-width with sliders)
Was This Post Helpful? 0
  • +
  • -

#7 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 04 February 2014 - 08:26 AM

Alright then - here is the full-fledged code!

projects.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Projects</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.5.2.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Terminal_Dosis_300.font.js"></script>
<script type="text/javascript" src="js/atooltip.jquery.js"></script>
<script src="js/roundabout.js" type="text/javascript"></script>
<script src="js/roundabout_shapes.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.2.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/hover-image.js"></script>
<script type="text/javascript" src="js/tabs.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<style type="text/css">.bg {behavior:url("js/PIE.htc")}</style>
<![endif]-->
</head>
<body id="page3">
<div class="body1">
  <div class="body2">
    <div class="body3">
      <div class="main">
        <!-- header -->
        <header>
          <div class="wrapper">
            <h1><a href="index.html" id="logo"></a></h1>
            <form id="search" action="#" method="post">
              <div>
                <input type="submit" class="submit" value="">
                <input class="input" type="text" value="Site Search" onblur="if(this.value=='') this.value='Site Search'" onfocus="if(this.value =='Site Search' ) this.value=''">
              </div>
            </form>
            <nav>
              <ul id="menu">
                <li><a href="index.html">Home</a></li>
                <li><a href="interests.html">Interests</a></li>
                <li id="active"><a href="projects.html">Projects</a></li>
                <li><a href="activities.html">Activities</a></li>
                <li><a href="news.html">News</a></li>
                <li class="end"><a href="contact.html">Contact</a></li>
              </ul>
            </nav>
          </div>
          <div class="relative">
            <div id="gallery">
              <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>
          </div>
        </header>
        <!-- / header-->
        <!-- content -->
        <section id="content">
          <div class="line1 wrapper">
            <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>
              <article class="col2 pad_left1 tab-content" id="MT">
                <h2>Estimation of shape, illumination and reflectance from a single image</h2>
                <!--<ul class="gallery">
                  <li> <a href="images/big_img1.jpg" class="lightbox-image" rel="prettyPhoto[group1]" > <img src="images/page3_img1.jpg" alt=""> </a> </li>
                  <li> <a href="images/big_img2.jpg" class="lightbox-image" rel="prettyPhoto[group1]" > <img src="images/page3_img2.jpg" alt=""> </a> </li>
                  <li class="end"> <a href="images/big_img3.jpg" class="lightbox-image" rel="prettyPhoto[group1]" > <img src="images/page3_img3.jpg" alt=""> </a> </li>
                  <li> <a href="images/big_img4.jpg" class="lightbox-image" rel="prettyPhoto[group1]" > <img src="images/page3_img4.jpg" alt=""> </a> </li>
                  <li> <a href="images/big_img5.jpg" class="lightbox-image" rel="prettyPhoto[group1]" > <img src="images/page3_img5.jpg" alt=""> </a> </li>
                  <li class="end"> <a href="images/big_img6.jpg" class="lightbox-image" rel="prettyPhoto[group1]" > <img src="images/page3_img6.jpg" alt=""> </a> </li>
                  <li> <a href="images/big_img7.jpg" class="lightbox-image" rel="prettyPhoto[group1]" > <img src="images/page3_img7.jpg" alt=""> </a> </li>
                  <li> <a href="images/big_img8.jpg" class="lightbox-image" rel="prettyPhoto[group1]" > <img src="images/page3_img8.jpg" alt=""> </a> </li>
                  <li class="end"> <a href="images/big_img9.jpg" class="lightbox-image" rel="prettyPhoto[group1]" > <img src="images/page3_img9.jpg" alt=""> </a> </li>
                </ul>-->
            <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>
              		Key achievements<br><br><br><br><br>
              		Methods<br><br><br>
              		Implementation
              		</strong>
              	</span>
              		July 2012 - February 2013<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
              		<!--<a href="refs/SIRFS_BIWI.zip" target="_blank">Code</a>,-->
             </div>
              </article>
              <article class="col2 pad_left1 tab-content" id="ST2">
                <h2>Clustering neural systems using generative embedding</h2>
                <!--<ul class="gallery">
                  <li> <a href="images/big_img7.jpg" class="lightbox-image" rel="prettyPhoto[group2]" > <img src="images/page3_img7.jpg" alt=""> </a> </li>
                  <li> <a href="images/big_img8.jpg" class="lightbox-image" rel="prettyPhoto[group2]" > <img src="images/page3_img8.jpg" alt=""> </a> </li>
                  <li class="end"> <a href="images/big_img9.jpg" class="lightbox-image" rel="prettyPhoto[group2]" > <img src="images/page3_img9.jpg" alt=""> </a> </li>
                  <li> <a href="images/big_img1.jpg" class="lightbox-image" rel="prettyPhoto[group2]" > <img src="images/page3_img1.jpg" alt=""> </a> </li>
                  <li> <a href="images/big_img2.jpg" class="lightbox-image" rel="prettyPhoto[group2]" > <img src="images/page3_img2.jpg" alt=""> </a> </li>
                  <li class="end"> <a href="images/big_img3.jpg" class="lightbox-image" rel="prettyPhoto[group2]" > <img src="images/page3_img3.jpg" alt=""> </a> </li>
                  <li> <a href="images/big_img4.jpg" class="lightbox-image" rel="prettyPhoto[group2]" > <img src="images/page3_img4.jpg" alt=""> </a> </li>
                  <li> <a href="images/big_img5.jpg" class="lightbox-image" rel="prettyPhoto[group2]" > <img src="images/page3_img5.jpg" alt=""> </a> </li>
                  <li class="end"> <a href="images/big_img6.jpg" class="lightbox-image" rel="prettyPhoto[group2]" > <img src="images/page3_img6.jpg" alt=""> </a> </li>
                </ul>-->
            <div class="pad">
              	<p>Multivariate decoding models have been increasingly used to infer cognitive brain states from measures of brain activity. In this project, we are extending previous work on classification of neural systems to clustering, asking what structure can be discovered when no labelling information is given a priori. We illustrate the utility of our approach in neuroimaging and also investigate how our solution can be interpreted in the context of the underlying generative model. We envisage that our technique may aid in dissecting spectrum disorders into physiologically more well-defined subgroups.</p>
              	<span class="col3">
            		<strong>
            		Duration<br/>
              		Key achievements<br/><br/><br/>
              		Methods<br/><br/><br/>
              		Implementation
              		</strong>
              	</span>
              		August - December 2011<br>
              		Demonstrated upto 34% clustering superiority of a generative model as compared to time-series data, PCA reduction and chance on functional MRI’s.<br>
              		k-means, Gaussian mixture models, Bootstrap, Multidimensional scaling, Bayesian information criterion, Normalized mutual information, Distortion measure<br>
              		MATLAB
              		<!--<a href="refs/ST2_Code.zip" target="_blank">Code</a>,
              		<a href="refs/ST2_SystemsX.pdf" target="_blank">SystemsX.ch</a>,
              		<a href="refs/ST2_HBM.pdf" target="_blank">HBM poster</a>,
              		<a href="https://ww4.aievolution.com/hbm1201/index.cfm?do=abs.viewAbs&abs=4674" target="_blank">HBM submission</a>, -->
             </div>                
              </article>
              <article class="col2 pad_left1 tab-content" id="ST1">
                <h2>Social data mining on smartphones</h2>
                <!--<ul class="gallery">
                  <li> <a href="images/big_img4.jpg" class="lightbox-image" rel="prettyPhoto[group3]" > <img src="images/page3_img4.jpg" alt=""> </a> </li>
                  <li> <a href="images/big_img5.jpg" class="lightbox-image" rel="prettyPhoto[group3]" > <img src="images/page3_img5.jpg" alt=""> </a> </li>
                  <li class="end"> <a href="images/big_img6.jpg" class="lightbox-image" rel="prettyPhoto[group3]" > <img src="images/page3_img6.jpg" alt=""> </a> </li>
                  <li> <a href="images/big_img7.jpg" class="lightbox-image" rel="prettyPhoto[group3]" > <img src="images/page3_img7.jpg" alt=""> </a> </li>
                  <li> <a href="images/big_img8.jpg" class="lightbox-image" rel="prettyPhoto[group3]" > <img src="images/page3_img8.jpg" alt=""> </a> </li>
                  <li class="end"> <a href="images/big_img9.jpg" class="lightbox-image" rel="prettyPhoto[group3]" > <img src="images/page3_img9.jpg" alt=""> </a> </li>
                  <li> <a href="images/big_img1.jpg" class="lightbox-image" rel="prettyPhoto[group3]" > <img src="images/page3_img1.jpg" alt=""> </a> </li>
                  <li> <a href="images/big_img2.jpg" class="lightbox-image" rel="prettyPhoto[group3]" > <img src="images/page3_img2.jpg" alt=""> </a> </li>
                  <li class="end"> <a href="images/big_img3.jpg" class="lightbox-image" rel="prettyPhoto[group3]" > <img src="images/page3_img3.jpg" alt=""> </a> </li>
                </ul>-->
            <div class="pad">
              	<p>Smartphones have become increasingly popular and will continue to do so in the near future. Designing user-optimized applications poses an ample challenge, since it entails thorough understanding of user behavior. In this project, we report an Android application named <i>SocialMine</i>. The deployment of SocialMine permitted the comparison of contact, interaction and communication patterns for a fixed group of users. We illustrate preliminary results of a very first deployment conducted at ETH Zurich.</p>
              	<span class="col3">
            		<strong>
            		Duration<br>
              		Key achievements<br><br><br>
              		Methods<br><br>
              		Implementation
              		</strong>
              	</span>
              		February - July 2011<br>
              		Developed Android application to collect user logs. Conducted alpha test and established statistics to analyze and correlate social contacts, behavior and communication patterns.<br>
              		Android services (WiFi, GSM), Facebook REST/Graph API, XAMPP MySQL, Java Multithreading<br>
              		Java for Android framework
             </div>
              </article>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</div>
<div class="body4">
  <div class="main">
    <section id="content2"> </section>
  </div>
</div>
<!-- / content -->
<div class="main">
  <!-- footer -->

  <!-- / footer -->
</div>
<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();
    // for lightbox
    if ($("a[rel^='prettyPhoto']").length) {
        $(document).ready(function () {
            // prettyPhoto
            $("a[rel^='prettyPhoto']").prettyPhoto({
                theme: 'light_square'
            });
        });
    }
});
</script>
</script>
<!--<div align=center>This template  downloaded form <a href='http://all-free-download.com/free-website-templates/'>free website templates</a></div>-->
</body>
</html>




atooltip.jquery.js
(publicly available)



cufon-replace.js

Cufon.replace('h2, .date', { fontFamily: 'Terminal Dosis', hover:true });



cufon-yui.js
(publicly available)



hover-image.js

$(function(){
	// lightbox image
	$(".lightbox-image").append("<span></span>");
	
	$(".lightbox-image").hover(function(){
		$(this).find("img").stop().animate({opacity:0.5}, "normal")
	}, function(){
		$(this).find("img").stop().animate({opacity:1}, "normal")
	});
});



html5.js
(well-enough known shim)


jquery-1.5.2.js
(publicly available)


jquery.easing.1.2.js
(publicly available)


jquery.prettyPhoto.js
(publicly available)


roundabout_shapes.js
(publicly available)


roundabout.js
(publicly available)


script.js

$(document).ready(function() {
   // initiate tool tip
	$('.normaltip').aToolTip();
 });



tabs.js

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

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

  }
 }


Terminal_Dosis_300.font.js
(publicly available)

This post has been edited by Dormilich: 04 February 2014 - 11:11 AM
Reason for edit:: removed code that is available otherwise

Was This Post Helpful? 0
  • +
  • -

#8 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 318
  • View blog
  • Posts: 1,173
  • Joined: 15-January 14

Re: Activate internal links within JS roundabout

Posted 04 February 2014 - 09:20 AM

Do you have that online anywhere where we could check it out? Have you checked the Javascript error console to see if there are any error messages?
Was This Post Helpful? 0
  • +
  • -

#9 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 04 February 2014 - 12:21 PM

View PostArtificialSoldier, on 04 February 2014 - 09:20 AM, said:

Do you have that online anywhere where we could check it out? Have you checked the Javascript error console to see if there are any error messages?



I had uploaded the files in my post #5. Just download it - it contains the code files which I have listed here.

How do I check the "Javascript error console" ?
Was This Post Helpful? 0
  • +
  • -

#10 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 318
  • View blog
  • Posts: 1,173
  • Joined: 15-January 14

Re: Activate internal links within JS roundabout

Posted 04 February 2014 - 12:45 PM

Every modern browser has developer tools. For IE you can press F12. For Firefox, most people probably install the Firebug extension but there is also a Web Developer menu with tools in it. For Chrome, press Ctrl-Shift-I. Do a search for developer tools for the browser you use to see how to find Javascript error messages. The developer tools are the best way to debug any web page.

Quote

I had uploaded the files in my post #5. Just download it - it contains the code files which I have listed here.

I understand that, but if it's already online then that saves me the time of downloading the zip file, scanning it for malware, extracting the files, uploading the files to a server, and then accessing it with my own developer tools. If you make it easy for people to help you then you'll find that it's easier to get help.
Was This Post Helpful? 1
  • +
  • -

#11 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3177
  • View blog
  • Posts: 10,638
  • Joined: 12-December 12

Re: Activate internal links within JS roundabout

Posted 04 February 2014 - 02:36 PM

I just glanced through your code and noticed that for your roundabout you have
clickToFocus: 'true',

You could try deleting this line or setting it to 'false', so that it might, instead, follow the links.
Was This Post Helpful? 0
  • +
  • -

#12 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3479
  • View blog
  • Posts: 10,020
  • Joined: 08-June 10

Re: Activate internal links within JS roundabout

Posted 04 February 2014 - 11:39 PM

View Postgoogle_interview, on 04 February 2014 - 08:21 PM, said:

How do I check the "Javascript error console" ?

Error Console
Was This Post Helpful? 0
  • +
  • -

#13 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 05 February 2014 - 07:03 AM

View PostDormilich, on 04 February 2014 - 11:39 PM, said:

View Postgoogle_interview, on 04 February 2014 - 08:21 PM, said:

How do I check the "Javascript error console" ?

Error Console


A click on the images gives the following output on the JS console (including errors, warnings and logs).

Quote

13:58:46.666 GET http://ajitagupta.co.nf/projects.html [HTTP/1.1 200 OK 1147ms]
13:58:47.824 Unknown property '-moz-border-radius'. Declaration dropped. style.css:44
13:58:47.824 Unknown property '-moz-box-shadow'. Declaration dropped. style.css:47
13:58:48.070 Use of Mutation Events is deprecated. Use MutationObserver instead. script.js:20
13:58:53.488 Use of getPreventDefault() is deprecated. Use defaultPrevented instead. jquery-1.5.2.js:2720


The site is online now!
Was This Post Helpful? 0
  • +
  • -

#14 JackOfAllTrades  Icon User is offline

  • Saucy!
  • member icon

Reputation: 6033
  • View blog
  • Posts: 23,414
  • Joined: 23-August 08

Re: Activate internal links within JS roundabout

Posted 05 February 2014 - 07:11 AM

Best guess: hook the appropriate Roundabout event -- probably focus -- and update the content according to the focused element.
Was This Post Helpful? 0
  • +
  • -

#15 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3177
  • View blog
  • Posts: 10,638
  • Joined: 12-December 12

Re: Activate internal links within JS roundabout

Posted 05 February 2014 - 07:24 AM

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.

The links in your Projects-list on the left use a Javascript tabs feature (tabs.js) to change the content on the right. If you use one of the Project-links to change the content, then click one of your images in the roundabout, then it will again jump down to that section.

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".

You'll need to hook up clicking the images to the tabs feature, possibly using class-names.
Was This Post Helpful? 0
  • +
  • -

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