jQuery Image Warp script issues [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I am currently attempting to execute this on my site http://www.dynamicdrive.com/dynamicindex4/imagewarp.htm. It seems easy, I have currently called all scripts in my section and called the class in the image I where I want the it. Here is my
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="Reflecting our present perception of aesthetics.">
<meta name="keywords" content="">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=1, user-scalable=no" />
<meta name="robots" content="INDEX,FOLLOW" />
<meta property="og:url" content="" />
<meta property="og:title" content="" />
<meta property="og:image" content="" />
<meta property="og:description" content="" />
<title><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="icon" type="image/x-icon" href="" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_media-queries.css'); ?>" type="text/css" />
<!-- jquery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- fontawesome -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex4/jquery.imageWarp.js">
/***********************************************
* jQuery imageWarp script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('img.imagewarp').imageWarp() //apply warp effect to images with CSS class "imagewarp"
})
</script>
</head>
and this is how my image looks
<img src="emb.png" class="imagewarp">
The effect does not seem to appear. Any ideas? Thank you!

See below if it helps i added the script file here as there was no https or cdn link availables .
/* imageWarp jQuery plugin v1.01
* Last updated: June 29th, 2009. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/
jQuery.noConflict()
jQuery.imageWarp={
dsettings: {
warpfactor: 1.5, //default increase factor of enlarged image
duration: 1000, //default duration of animation, in millisec
imgopacity: [0.5, 1],
warpopacity: [0.1, 0.5]
},
warpshells: [],
refreshoffsets:function($target, warpshell){
var $offsets=$target.offset()
warpshell.attrs.x=$offsets.left //update x position of original image relative to page
warpshell.attrs.y=$offsets.top
warpshell.newattrs.x=warpshell.attrs.x-((warpshell.newattrs.w-warpshell.attrs.w)/2) //update x position of final warped image relative to page
warpshell.newattrs.y=warpshell.attrs.y-((warpshell.newattrs.h-warpshell.attrs.h)/2)
},
addEffect:function($, $target, options){
var setting={} //create blank object to store combined settings
var setting=jQuery.extend(setting, this.dsettings, options)
var effectpos=this.warpshells.length
var attrs={w:$target.outerWidth(), h:$target.outerHeight()}
var newattrs={w:Math.round(attrs.w*setting.warpfactor), h:Math.round(attrs.h*setting.warpfactor)}
var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', border:'1px solid gray', zIndex:1000}).appendTo(document.body)
$target.add($clone).data('pos', effectpos) //save position of image
var $targetlink=$target.parents('a').eq(0)
this.warpshells.push({$clone:$clone, attrs:attrs, newattrs:newattrs, $link:($targetlink.length==1)? $targetlink : null}) //remember info about this warp image instance
$target.click(function(e){
var $this=$(this).css({opacity:setting.imgopacity[0]})
var imageinfo=jQuery.imageWarp.warpshells[$(this).data('pos')]
jQuery.imageWarp.refreshoffsets($this, imageinfo) //refresh offset positions of original and warped images
if (imageinfo.$link){
e.preventDefault()
}
var $clone=imageinfo.$clone
$clone.stop().css({left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:setting.warpopacity[0], visibility:'visible'})
.animate({opacity:setting.warpopacity[1], left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration,
function(){ //callback function after warping is complete
$clone.css({left:0, top:0, visibility:'hidden'})
$this.css({opacity:setting.imgopacity[1]})
if (imageinfo.$link){
window.location=imageinfo.$link.attr('href')
}
}) //end animate
}) //end click
}
};
jQuery.fn.imageWarp=function(options){
var $=jQuery
return this.each(function(){ //return jQuery obj
var $imgref=$(this)
if (this.tagName!="IMG")
return true //skip to next matched element
if (parseInt($imgref.css('width'))>0 && parseInt($imgref.css('height'))>0){ //if image has explicit width/height attrs defined
jQuery.imageWarp.addEffect($, $imgref, options)
}
else if (this.complete){ //account for IE not firing image.onload
jQuery.imageWarp.addEffect($, $imgref, options)
}
else{
$(this).bind('load', function(){
jQuery.imageWarp.addEffect($, $imgref, options)
})
}
})
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://www.dynamicdrive.com/dynamicindex4/jquery.imageWarp.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('img.imagewarp').imageWarp();
})
</script>
<img src="http://www.mondieu.nu/mag/wp-content/uploads/2017/12/emb.png" class="imagewarp">

Related

Duplicated Time Series are shown using D3-timeseries() in javascript but it is expected to show only one plot

I am currently using the code repository D3-timeseries at https://github.com/mcaule/d3-timeseries
The problem is that I only want to draw one time series but the plot I get is
From the scroll bar of the attached picture, you can see that it creates tons of the same time series plot.
Below you can see my code:
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<style>
.dot {
stroke: #000;
}
</style>
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="d3-timeseries/src/d3_timeseries.js"></script>
<link rel="stylesheet" type="text/css" href="d3-
timeseries/src/d3_timeseries.css">
<script type="text/javascript">
//var margin = { top: 50, right: 50, bottom: 50, left: 50 };
function main() {
d3.json("PeriodDetection-result.json", function(error, data) {
if (error) {
console.log(error);
return;
}
data.forEach(function(d){ d.newDate = new Date(d.newDate * 1000)
})
var chart = d3.timeseries()
.addSerie(data,{x:'newDate',y:'temp'},
{interpolate:'monotone',color:"#333"})
.width(1000)
chart("body")
var show = true;
});
}
setInterval(function() { main(); }, 250);
main();
</script>
</body>
</html>
My date file looks like
I attach the put a simplified json file below as well, which should be saved as PeriodDetection-result.json.
[{"newDate":519955200,"temp":6.6},{"newDate":520041600,"temp":6},{"newDate":520128000,"temp":6.9},{"newDate":520214400,"temp":7.7},{"newDate":520300800,"temp":8},{"newDate":520387200,"temp":3.9},{"newDate":520473600,"temp":0.8},{"newDate":520560000,"temp":2.8},{"newDate":520646400,"temp":8},{"newDate":520732800,"temp":9.8},{"newDate":520819200,"temp":11.4},{"newDate":520905600,"temp":8.6},{"newDate":520992000,"temp":5.2},{"newDate":521078400,"temp":6.6},{"newDate":521164800,"temp":5.7},{"newDate":521251200,"temp":4.6},{"newDate":521337600,"temp":5.8},{"newDate":521424000,"temp":7},{"newDate":521510400,"temp":4.8},{"newDate":521596800,"temp":4.4},{"newDate":521683200,"temp":4.4},{"newDate":521769600,"temp":7.9},{"newDate":521856000,"temp":10.6},{"newDate":521942400,"temp":5},{"newDate":522028800,"temp":7.6},{"newDate":522115200,"temp":9.2},{"newDate":522201600,"temp":9.7},{"newDate":522288000,"temp":8.8},{"newDate":522374400,"temp":6.8},{"newDate":522460800,"temp":9.4},{"newDate":522547200,"temp":11},{"newDate":522633600,"temp":2.5},{"newDate":522720000,"temp":2.1},{"newDate":522806400,"temp":5.4},{"newDate":522892800,"temp":6.2},{"newDate":522979200,"temp":7.8},{"newDate":523065600,"temp":7.4},{"newDate":523152000,"temp":9.3},{"newDate":523238400,"temp":9.3},{"newDate":523324800,"temp":9.5},{"newDate":523411200,"temp":8.5},{"newDate":523497600,"temp":10},{"newDate":523584000,"temp":7.7},{"newDate":523670400,"temp":9.3},{"newDate":523756800,"temp":9.1},{"newDate":523843200,"temp":3.5},{"newDate":523929600,"temp":3.6},{"newDate":524016000,"temp":2.5},{"newDate":524102400,"temp":1.7},{"newDate":524188800,"temp":2.7},{"newDate":524275200,"temp":2.9},{"newDate":524361600,"temp":5.3},{"newDate":524448000,"temp":7.7},{"newDate":524534400,"temp":9.1},{"newDate":524620800,"temp":9.4},{"newDate":524707200,"temp":7.3},{"newDate":524793600,"temp":8.4},{"newDate":524880000,"temp":9.2},{"newDate":524966400,"temp":6.6},{"newDate":525052800,"temp":9.7},{"newDate":525139200,"temp":12.4},{"newDate":525225600,"temp":10.2},{"newDate":525312000,"temp":5.9},{"newDate":525398400,"temp":7.1},{"newDate":525484800,"temp":7.5},{"newDate":525571200,"temp":9.7},{"newDate":525657600,"temp":12.2},{"newDate":525744000,"temp":5.6},{"newDate":525830400,"temp":5.4},{"newDate":525916800,"temp":8.3},{"newDate":526003200,"temp":10.6},{"newDate":526089600,"temp":9.1},{"newDate":526176000,"temp":11.3},{"newDate":526262400,"temp":10.9},{"newDate":526348800,"temp":8.9},{"newDate":526435200,"temp":6.3},{"newDate":526521600,"temp":9},{"newDate":526608000,"temp":6.1},{"newDate":526694400,"temp":9.1},{"newDate":526780800,"temp":9.6},{"newDate":526867200,"temp":6},{"newDate":526953600,"temp":10},{"newDate":527040000,"temp":11},{"newDate":527126400,"temp":6.2},{"newDate":527212800,"temp":8.3},{"newDate":527299200,"temp":11.3},{"newDate":527385600,"temp":11.3},{"newDate":527472000,"temp":6.7},{"newDate":527558400,"temp":6.6},{"newDate":527644800,"temp":11.4},{"newDate":527731200,"temp":6.9},{"newDate":527817600,"temp":10.6},{"newDate":527904000,"temp":8.6},{"newDate":527990400,"temp":11.3},{"newDate":528076800,"temp":12.5},{"newDate":528163200,"temp":9.9},{"newDate":528249600,"temp":6.9},{"newDate":528336000,"temp":5.5},{"newDate":528422400,"temp":7.8}]
Any help is highly appreciated!
Stupid error, in the code, just comment out this line,"setInterval(function() { main(); }, 250),then it will work.
You can also use Pondjs or Momentjs to do this, its much cleaner, but can be a little tedious. It deals with these points and auto plots them base don how to create the code based on chart implementation chart by using react-timeseries-charts. They both work well together with pond or moment.

Javascript Function works inside HTML page but doesn't work from external .js file

I am trying to place some Javascript code inside a .js file so that I can call it from multiple HTML pages. The problem is, my Javascript code works fine if I place it in a script within the HTML page, but when placed in a external .js file, it simply does not work. I've looked at these questions quite a few times and still cannot find the error.
Here's the HTML page:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/global.css" />
<link rel="stylesheet" type="text/css" href="css/contacts.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src ="js/contactsModule.js"></script>
<title>Hall of Heroes</title>
</head>
<body onload = "contactsModule.getContacts();">
<!-- Global Header Starts Here -->
<div class="header">
<div class="cancel">
<img src="img/cancel.png" /><!-- if screen is triggered from onboarding, then go back to onboarding screen instead of home -->
</div>
<h1>My Contacts</h1>
</div>
<div class="wrapper">
<h3>A</h3> <!-- letter header goes here -->
<!-- Begin Contact Unit -->
<div class="feed">
</div>
<!-- End Contact Unit -->
</div>
</body>
</html>
And here is the .js file:
var contactsModule = (function($){
function getContacts()
{
dbContacts();
}
function displayContacts(contactArray){
window.alert('displayContacts now running!');
var jsonObject = $.parseJSON(contactArray);
jsonObject.forEach(function (dat) {
//Begin Contact Unit
$('.feed')
.append('<div class="feed-img"><img src="' + dat.avatarUrl + '"/>\
</div><div class="feed-text"><p><span class="name_highlight">\
' + dat.firstName + ' ' + dat.lastName + '</span></p></div>');
//End Contact Unit
});
}
function dbContacts() {
var avatarUrl;
var firstName;
var lastName;
$.ajax({
type: "GET",
url: "http://www.hallofheroesapp.com/php/contacts.php",
data: {avatarUrl: avatarUrl, firstName: firstName, lastName: lastName},
success: function (response) {
window.alert('AJAX ran successfully!');
displayContacts(response);
},
error: function(response){
alert("Error:" + response);
}
});
}
}(jQuery));
Thank you for your help!
You aren't returning anything from your IIFE. contactsModule will then not contain anything, ie equal undefined. Also just defining functions doesn't make those functions part of some object, with the exception of globally defined functions. You have to assign them, or define them as part of an object literal
Your code should be something like
var contactsModule = (function($){
return {
getContacts: function() {
/* code */
},
displayContacts: function(contactArray){
/* code */
}
dbContacts function() {
/* code */
}
};
}(jQuery));
How about using
$(document).ready(function(){
///// your code here...
});
... change ...
<body onload = "contactsModule.getContacts();">
... to ...
<body>
... and add event handler using jquery ...
(function($){
function getContacts()
{
dbContacts();
}
/* ... etc ... */
// use jquery's onready handler
$(getContacts);
}(jQuery));
Had the same problem. Easy thing when you research on google.
Your Js code loads before the DOM loads. Which should be the other way around. So you have to use this
$(document).ready(function(){
//only jQuery is recommended, global JavaScript functions outside!
});
Also JavaScript
document.addEventListener("DOMContentLoaded", function(event) {
//global function outside!
});
Only this way you can be sure that your DOM is loaded before your jquery finds your elements.

JavaScript not updating website logo size as expected

I am adding code to my website so that my logo resizes appropriately.
I wrote a JavaScript function for the logo to resize based on the window width. Unfortunately, when I do this, the logo just resumes to its original size. If I apply an inline style to the image to set the width, it works but if the size of the image is dictated by the CSS file or by my JavaScript, the logo just remains its original size.
Here is the head of my index.html file:
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Computer Repair and Services</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Athena Harting" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/MobileMenu.js"></script>
<script src="js/WidthMargin.js"></script>
<script src="js/MobileLogo.js"></script>
</head>
<body>
<div class="container">
<header>
<div class="logospace" id="logospace"><img src="imgs/Logo_Glossy_Web.png"/></div>
<h1>Athenian Computers<span>Founded and operated out of Shoreline, WA</span></h1>
</header>
You will notice that I have a MobileLogo.js and a default.css file referenced in this file.
Here is the relevant code that should be applying to my logo within my default.css file:
/* TEST STUFF */
.logospace {
width: 200px;
height: 200px;
}
And here is my MobileLogo.js file. This file should be appropriately resizing my logo based on the width of the page:
var resize = function(){
var wi = $(window).width();
if(wi <= 519){
$("#logospace").css({
'width' : '50px'
'height' : '50px'
});
}
else if (wi <= 799){
$("#logospace").css({
'width' : '100px'
'height' : '100px''
});
}
else if (wi <= 980){
$("#logospace").css({
'width' : '150px'
'height' : '150px'
});
}
else{
$("#logospace").css({
'width' : '200px'
'height' : '200px'
});
}
}
$(window).ready(function() {
resize();
$(window).resize(function() {
resize();
});
});
Can anyone tell what's wrong?
You have an extra ' in 'height' : '100px''. You may want to remove it.
There are other issues except the extra ': You're missing commas between the style definitions:
$("#logospace").css({
'width' : '50px', <-------- HERE, since it seems tough to see for some
'height' : '50px'
});
The missing comma throws syntax errors and that is halting your entire code. These are missing in all your calls to css().
EDIT:
The div around the image is resizing as it should; when the window resizes, the div resizes. The problem is that the image is not, as displayed in my fiddle. I made the height of the div larger, to display the problem.
To fix this, assign the id or class (or both) to the image, not its parent div.

Remove all href links using jquery

I am trying to remove all the links from a parsed site which has then had a div removed and placed in the main code. The problem is that I am trying to remove all the 'href' links in the extracted div but am unable to get anywhere. I have tried using 'CSS' and works but only in chrome and I have to use IE. I have looked at 'php simple html dom' parser to see if i could do it before the file is saved but can't get anything to work. so my last resort is to use 'jquery' but the problem is that the links to remove is being extracted from the file and is not directly in the code. If anyone could help me I would really appreciate it. below is the code I am using.
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta http-equiv="content-language" content="en">
<meta name="viewport" content="width=500" />
<title>example News</title>
<link rel="stylesheet" type="text/css" href="site/wwwRand1.css">
<?php
include( 'site/simple_html_dom.php');
$html=file_get_html( 'http://example.com/home.php');
$html->save('site/result.htm')
?>
<script type="text/javascript" src="site/jquery.js"></script>
<script type="text/javascript">
$('document').ready(function() {
$('#postsArea').load('site/result.htm #postsArea');
});
</script>
</head>
<body>
<div id="wrap">
<div id="postsArea"></div>
</div>
</body>
Just remove the href attribute from the <a /> tags
$("#postsArea").load( "site/result.htm", function() {
$("#postsArea a").removeAttr("href")
});
If you still want the tags to appear clickable...
$("#postsArea a").removeAttr("href").css("cursor","pointer");
Hope this helps
Try this:
$('document').ready(function () {
$.ajax({
url : 'site/result.htm',
dataType: 'html',
success : function(html){
$html = $(html).find(a).attr("href", "");
$("#postsArea").html($html);
},
error : function(){
$("#postArea").html("<div>No Data Found.</div>");
}
})
});
Here's how I did it:
$(function() {
$('a[href]').each(function() {
var link = jQuery(this);
link.after(jQuery('<span/>').text(link.text()));
link.remove();
});
});
It replaces Foo with <span>Foo</span>.

jQuery Function for Split Lists

I'm trying to build some jQuery functionality into my site and I've caught a snag. I need to split a jQuery block style menu into 2 & possibly 3 columns vs having them all in one column on top of each other. I'll post as much as I can in here. I'm sure I'm missing something blatantly obvious. I'll start with the website I'm going off of:
http://upsidestudio.com/web/splitcol/2/
Now the CSS I've got:
.tabs {
width: 700px;
font-weight: ;
margin: 0;
padding: 0px;
float: left;
}
the <head> of my html: (I think my errors would be in here: I'm new to jQuery/Javascript)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>My Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<!-- !Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/screen.css" media="all" />
<!--[if IE 7]><link rel="stylesheet" href="css/ie7.css" type="text/css" media="screen" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css" type="text/css" media="screen" /><![endif]-->
<!-- !jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script>
<script>
// execute your scripts when the DOM is ready. this is mostly a good habit
$(function() {
// initialize scrollable
$("#browsable").scrollable({circular: true}).navigator().autoscroll({
interval: 10000
});
// initialize scrollable together with the autoscroll plugin
var root = $("#scroller").scrollable({circular: true}).autoscroll({ autoplay: false });
// perform JavaScript after the document is scriptable.
$(function() {
// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes > div")
});
});
<!-- !jQuery Split Navigation -->
$(document).ready(function() {
$('.tabs').each(function() {
if($(this).is("ol")) { var ordered = true; }
var colsize = Math.round($(this).find("li").size() / 2);
$(this).find("li").each(function(i) {
if (i>=colsize) {
$(this).addClass('right_col');
}
});
if(ordered) {
$(this).find('.right_col').insertAfter(this).wrapAll("<ol class='tabs' start='" + (colsize+1) + "'></ol>").removeClass("right_col");
} else {
$(this).find('.right_col').insertAfter(this).wrapAll("<ul class='tabs'></ul>").removeClass("right_col");
}
});
});
</script>
</head>
And Lastly...My Html section.
<!--THE TABS-->
<hr width="575" size="4" noshade align="left">
<ul class="tabs">
<li>What We Do</li>
<li>How It Works</li>
<li>FAQ</li>
<li>The Ajungo Team</li>
<li>Advertise</li>
</ul>
<hr width="575" size="4" noshade align="left"><br/><br/>
<!--TAB PANES COME IN BELOW THIS-->
Well, the biggest problem I can see there is that you've got a HTML comment stuck in the middle of the script block:
<!-- !jQuery Split Navigation -->
Remove that, then adding
.tabs {
margin-bottom: 20px;
}
And you can see that the ul.tabs list has been split in two. However, there a few inefficiencies in the script. It can be rewritten much, much more cleanly like this:
$('.tabs').each(function() {
var t = $(this), // Store a copy of both $(this) and t.children(),
children = t.children(), // to avoid calling the jQuery function too much
// Create a clone of the original list, then empty it and insert it after the original
secondList = t.clone(false).empty().insertAfter(this),
// Calculate the number of elements to move to the second list
// ie. half the number of elements in the list, divided by two and rounded up
length = Math.ceil(children.length / 2);
// Move half the children of the original list to the new one
children.slice(length).appendTo(secondList);
// If the list is an ordered list, let the list start at the correct position
if(this.nodeName === 'OL'){
secondList.attr('start', length + 1);
}
});
See: http://www.jsfiddle.net/yijiang/Tf4HT/1/

Categories