jquery kwicks issue - javascript

I've been working on my problem for the past few hours and am at the end of my rope. I need help.
I have a staging page where I tested the code and verfied that it works, but on the live page, the code refuses to budge. I can't figure out why kwicks jq seems to be ignoring the html on the jujumamablog.com header. <-- this is my question.
I'm using the kwicks for jQuery. I created a working sample page so I could be sure that the code was working before trying to integrate into the live area of the site. The sample page can be found here: http://jujumamablog.com/jujumama/dev.html
The code for the workingsample page is as follows
<!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" xml:lang="en" lang="en" dir="ltr">
<head>
<title>Kwicks Examples: Example 1</title>
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
<style type="text/css">
/* defaults for all examples */
.kwicks {
list-style: none;
position: relative;
margin: 0;
padding: 0;
}
.kwicks li{
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
}
/* example 1 */
#example1 .kwicks li{
float: left;
width: 98px;
height: 200px;
margin-right: 2px;
}
#example1 #kwick1 {
background-color: #53b388;
}
#example1 #kwick2 {
background-color: #5a69a9;
}
#example1 #kwick3 {
background-color: #c26468;
}
#example1 #kwick4 {
background-color: #bf7cc7;
}
#example1 #kwick5 {
background-color: #bf7cc7;
margin-right: none;
}
</style>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 205,
spacing : 5
});
});
</script>
</head>
<body>
<div id="example1">
<ul class="kwicks">
<li id="kwick1"></li>
<li id="kwick2"></li>
<li id="kwick3"></li>
<li id="kwick4"></li>
<li id="kwick5"></li>
</ul>
</div>
<div style="clear:both;"></div>
</body>
I was hoping that this would be a fairly simple 'plug-and-play' instance. Boy, was I wrong.
My task was to get this slick piece running smoothly. I know there are other issues with the main site (jujumamablog.com), load time specifically, which I was told to ignore for the time being.
Edit-----------
I need to be a bit more clear here. The above code works, I'm wondering why, when I try to put the code into the live page (jujumamablog.com, where there are other scripts and -ish) that this stops working.
Thanks in advance.

It looks like you are including jQuery a second time, and since all those plugins are just methods of jQuery, you blow them all away.
The first one is on line 65, and the second is on line 91. All the plugins added between those two, are destroyed.
As a side note, you should consider consolidating all those scripts into one, then compress them with YUI compressor or whatever you prefer, and finally, if possible, put it at the bottom instead of at the top.

The $().ready(function() { looks wrong to me. I thought that the two ways of doing it were
$(function()
{
//etc
});
and
$(document).ready(function()
{
//etc
});

I get an error on this line:
jQuery('ul.sf-menu').superfish();
[Exception] TypeError: Object # has no method 'superfish'
It's possible this is stopping the rest of your ready events from firing.

I found out that the problem is that your live server uses a newer version of Jquery. I have the same problems but I don't know what's different between 1.2.6 and 1.4.2. Hopefully some answers will turn up!
Now I'm asking here: Plugin: Kwicks for Jquery works perfectly with Jquery 1.2.6 but not 1.4.2

Related

jQuery not working out of VScode, but does out of the Internet.. How can I fix this?

I am learning to build websites and at the moment I am coding in visual-studio code insiders, with most jQuery plugins installed.
When I open this url :
" http://www.completewebdevelopercourse.com/content/4-jquery/4.3.html "
which has identical source code as the code below,
I get two different results.
one, In which the java-script is working (this is the page from the link), and in the other(stored in a local folder and opened inside VScode), it is not.
I have consulted the VS-code website and forums. No luck and my problem is not mentioned at all. Only that there does not seem to be a good plugin for jQuery but snippet-packages, which I have installed.
And normal google-ling gives me all the same results in which people are asking for jQuery plugins as mentioned above
How can this be? And how do I fix it?
[code]
<!DOCTYPE html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
#circle {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: green;
margin: 10px;
}
.square {
width: 150px;
height: 150px;
background-color: red;
margin: 10px;
}
</style>
</head>
<body>
<div id="circle"></div>
<div class="square"></div>
<div class="square"></div>
<script type="text/javascript">
$("div").click(function() {
alert("a div was clicked!");
});
</script>
</body>
Make sure that you downloaded the jquery.min.js file (you should place it in the same folder of the html page), otherwise it would go 404.

Horizontal scroll event not working on IE? (seems like no other event is working)

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
height: 250px;
width: 250px;
overflow: auto;
}
#content {
height: 800px;
width: 2000px;
background-color: coral;
}
</style>
</head>
<body>
<p>Scroll inside the div element to display the number of pixels the content of div is scrolled horizontally and vertically.</p>
<div id="myDIV">
<div id="content">Scroll inside me!</div>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener('scroll', function (e) {
alert("scroll");
});
document.getElementById("myDIV").addEventListener('click', function (e) {
alert("click");
});
</script>
Why its not working in IE I played this same code in w3 try it yourself page, it works in IE but not if I tried it as a separate file, so confused. Even if some one downvote this please tell me what I am missing?
I found these things when I browse other answers:
pointing to window.scroll but I need on a particular element
Use overflow-x: scroll; overflow-y: hidden; or vice versa.(which didn't work and also I need scroll on both ways)
NOTE:
This code works clearly in other browsers.
Its my bad. May be helpful for someone like me, Please enable scripting in your IE. :_(
A thing to note here is, Although script is not enabled it w3 school exercises exercises worked because of iframe?. If so how?

How to implement the nanoScroller so that it works correctly?

I'm sure I am missing something obvious and I have checked the other questions regarding this but none seem to have exactly my issue. I am new to Javascript but I'm sure this is a very simple script to implement on a website. If I can get it to work I can edit it from there and see how it works to further enhance it or remove from it.
Here is my code so that you can see exactly how i have it in the .html file
<!DOCTYPE>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="css/nanoscroller.css">
<script rel="text/javascript" src="js/jquery.nanoscroller.min.js"></script>
<style type="text/css">
/* START NanoSlider */
.nano { background: #bba; width: 500px; height: 500px; }
.nano .content { padding: 10px; }
.nano .pane { background: #888; }
.nano .slider { background: #111; }
/* END NanoSlider */
</style>
<script>
$(document).ready(function(){
$(".nano").nanoScroller();
});
</script>
</head>
<body>
<div id="about" class="nano">
<div class="content">
This is the content box and it should be scrolling but it is not!! =/.
</div>
</div>
</body>
</html>
Here is a JSFiddle: http://jsfiddle.net/fcJr3/1/
Maybe I am linking in or refering to required files wrong? or possibly NOT linking in or referring to all the files I am suppose to?
As you can see in the JSFiddle I only get the box. I don't get the scroll bar or any of the effects. Your help is greatly appreciated, thanks!
EDIT: this is the nanoSlider here: http://jamesflorentino.github.io/nanoScrollerJS/
You need to include the jQuery library itself. You can download it or run it straight from the google cdn i.e.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
In your fiddle you need to include jquery using the dropdown top left i.e.
http://jsfiddle.net/fcJr3/2/

How can I act on a hashchange event in AngularJs

I'm a newbie to AngularJs.
What I'm trying to do is update the page on hashchange events.
What I currently do (and know is not the "right" way to go) is:
<!DOCTYPE html>
<html>
<head>
<style>
#hashdrop {
display:block;
border: 1px solid gray;
width: 500px;
overflow: auto;
background-color: rgb(241,241,241);
border-radius: 4px;
text-align: center;
vertical-align: middle;
line-height: 100px;
font-size: large;
height: 100px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
var example = function($scope) {
$scope.lastHash = location.hash.slice(1);
$(window).on('hashchange', function (event) {
$scope.lashHash = location.hash.slice(1);
$scope.$apply();
});
};
</script>
<meta charset=utf-8 />
</head>
<body ng-app ng-controller="example">
<div id="hashdrop" >
{{lastHash}}
</div>
</body>
</html>
(This can be copy-pasted into a blank html file and run. jsbin didn't detect the haschange correctly, for me.)
This doesn't really work. for some reason the value is not updated and I would assume there is a 'right' way to this in angularjs.
I would to understand how to do this right and more specifically how to correct the code in this example to work the "angular way".
Thanks!
UPDATE 1
Okay, After reading the comment about $location, I found some information and change my app to this:
<!DOCTYPE html>
<html>
<head>
<style>
#hashdrop {
display:block;
border: 1px solid gray;
width: 500px;
overflow: auto;
background-color: rgb(241,241,241);
border-radius: 4px;
text-align: center;
vertical-align: middle;
line-height: 100px;
font-size: large;
height: 100px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
angular.module('example',[]).config(function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
});
var example = function($scope, $location) {
};
</script>
<meta charset=utf-8 />
</head>
<body ng-app="example" ng-controller="example">
<div id="hashdrop" >
Hash = {{$location.hash()}}
</div>
</body>
</html>
Still doesn't work. Nothing shows in output..
AngularJs uses hashes in urls for all normal routing, it's the default way of navigating the page. You use the routeProvider to define url-schemas much like you would in back end MVC frameworks like Django, and the routeProvider will listen for changes in the hash and load new content accordingly.
I suggest doing the tutorial. It is fairly good (even if it misses a lot of stuff). Routes are demonstrated in step 7.
Just warning. Angular assumes that you use hashes as your main way to handle urls and routing, so routeParams will not let you change only part of a page when changing the hash part of the url. To do that you would either switch to using get parameters or use something like ui-router which is more flexible.
You can bind to the hashchange event using angular.element instead of jQuery, potentially reducing dependencies.
Include this in your controller.
angular.element(window).bind('hashchange', function() {
console.log('hash has changed');
});
This code will log "hash has changed" when the hash changes.
Not sure it will solve your problem (there's some more funky stuff in your code, as Kevin Beal pointed out), but it's kind of unclear what you're saying "doesn't work".
Worth noting that angular.element uses jQuery if it's available, so if you want to use jQuery anyways, angular.element(window) won't do anything differently than $(window).

Jquery Transit Not working

I've been playing around with the jquery plugin Jquery Transit : http://ricostacruz.com/jquery.transit/ but no matter what I do, the code doesn't behave like I expect it to (as a matter of fact, it doesn't behave at all)
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:yellow;
width:100px;
border:1px solid blue;
position:absolute;
left:50px;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'></script>
<script scr='jquery.transit.js'></script>
</head>
<title>test</title>
</head><body>
<button id="go"> Run</button>
<div id="block">Hello!</div>
<script>
$(function() {
$("#go").click(
function(){
$("#block").transition({ x: '90px' }, 1500 );
});
});
</script>
</body>
</html>
The code doesn't work at all. I added the jquery animation code to compare it to, which works perfectly fine. Now I KNOW that jquery 1.8 broke jquery transit, but I'm using jquery 1.7 here so that shouldn't be an issue.
I'm at a loss here, anyone got any ideas?
EDIT:
I've followed everyone's instructions and created this:
http://web.uvic.ca/~markkoni/
and although the examples seem to work jsfiddle it doesn't work in practice.
Working demo (Tested on localhost too): http://jsfiddle.net/fedmich/S2ube/
the minified script seems to be not working. change your code from
http://ricostacruz.com/jquery.transit/jquery.transit.min.js
to
http://ricostacruz.com/jquery.transit/jquery.transit.js
also don't directly hotlink the javascript and put it on your own site, because when his site is down later, your web_app will also be down if you use his site's js.
and yes, put your code after pageload
$(function() {
//your code here
});
Make sur your DOM is loaded before manipulating it by enclosing it in a jQuery ready handler :
$(function(){
$('#go').click(function(){
$("#block").transition({x: '90px'}, 1500);
});
});​
Also, prefer using css left property instead of x which does not exists.
div {
background-color: yellow;
width: 100px;
border: 1px solid blue;
position: absolute;
left: 50px;
}
Here is a working fiddle
Also make sure your script tag looks like this :
<script type="text/javascript">
Instead of
<script>
Notes :
I'm using jQuery 1.7.2 in my fiddle, it seems that transit is not compatible with transit.js yet.
Transit does support backgroundColor and color properties. Check out the example : http://jsfiddle.net/PAnCh/
$(function() {
$("#block").mouseenter(
function(){
$("#block").transition({ x: '+=90px', backgroundColor: '#cacaca', color: '#000' }, 1000 );
});
$("#block").mouseleave(
function(){
$("#block").transition({ x: '-=90px', backgroundColor: '#036', color: '#fff' }, 500 );
});
});

Categories