kwicks slider loading but mouse hover not working - javascript

I have added kwicks javascript , css , jquery but the slider is not working
I tested the website in firebug and it's not showing any error or undefined variable
http://demo2.inheritedarts.com/george/
can some one help me finding a bug ? is it in my code or something i am doing wrong

try adding this script in your <head></head> tag
<script type='text/javascript'>
$(document).ready(function() {
$('.kwicks').kwicks({
maxSize : 250,
behavior: 'menu'
});
});
</script>
i think you forgot to initialize your ul element with kwicks API

Related

jquery works only after page refresh

I am using a responsive slider and many other scripts on my website. All scripts are working fine except slider's script. Slider's script only works when i refresh my page. I am failed to find a solution of this problem.
Here is the jquery code of slider:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#demo1').skdslider({delay:5000, animationSpeed: 2000,showNextPrev:true,showPlayButton:true,autoSlide:true,animationType:'fading'});
jQuery('#demo2').skdslider({delay:5000, animationSpeed: 1000,showNextPrev:true,showPlayButton:false,autoSlide:true,animationType:'sliding'});
jQuery('#demo3').skdslider({delay:5000, animationSpeed: 2000,showNextPrev:true,showPlayButton:true,autoSlide:true,animationType:'fading'});
jQuery('#responsive').change(function(){
$('#responsive_wrapper').width(jQuery(this).val());
$(window).trigger('resize');
});
});
</script>
Jquery library is added in section. and for slider code i tried different locations like in head section, body section and after body close tag also. Any help is appreciated...

Hide Image when another image is clicked

this seems to be simple.. but I am a bit noobish with jquery, maybe I am doing something silly wrong?
I want to click an image, and on that click, hide another image right next to it.
<script type="text/javascript">
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
</script>
Id's are correct as per the two images. What am I missing? Debugging it, the code never gets fired...
Thanks
EDIT
I had my control as a nested control on an asp masterpage, and its id was being rewritten. I have now fixed the id, but I still cant get any joy... I also see my markup is being rendered as an "input", would that make a difference?
<head>
<script src="js/jquery.min.1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#butShowMeSomeUnits").click(function () {
$('#arrowUnitspic').hide();
});
});
</script>
</head>
<body>
<input type="image" src="bookings_media/buttons/show-me-some-units.png" onmouseout="this.src='bookings_media/buttons/show-me-some-units.png'" onmouseover="this.src='bookings_media/buttons/show-me-some-units_orange.png'" id="butShowMeSomeUnits" name="ctl00$ctl00$ContentPlaceHolder1$bookings_right_content$butShowMeSomeUnits">
</body>
EDIT
JS Fiddle
If there is any confusion... the JS fiddle I spooled up with the exact code also does not work...
You need to do do on page ready:
<script type="text/javascript">
$(document).ready(function() {
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
</script>
Edit:
The fiddle you provided did not work until I chose jQuery 1.10.1 from the dropdown. You will notice your onmouseover changes the element first, but once you click on the input it does hide the image. Can you verify this works the same for you?
If the answer is no then I don't think you are loading the jQuery library on your page. To check this should work:
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}else{
alert("jQuery library is not found!");
}
In addition it might be helpful to see what errors your browser console /dev tools is showing.
Wrap the code in jQuery.ready() event. And also check whether jquery js file is loaded or not.
$(document).ready(function(){
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
You code looks good and works check here
What you might be missisng is either:
to load jQuery script in the head of your page.
to include $(document).ready(function() { //code here }); in case your <img> tags are after the script in the page code. This is so your code loads when page is ready/loaded.
Steps that may help you:
make sure you integrate jQuery lib right. (to check that you might wanna open console on chrome and type $("html").hide(); and see if the current page dissapears)
make sure your custom JS file or code is UNDER the including of jQuery lib.
very good starting point with jQuery is to put everything in $(document).ready() as below example:
$(document).ready(function(){
$("img").click(function(){
$("img").hide();
$(this).show();
});
});

resizable is not recognized

I have included the jquery ui in my page and try to appliy resizable to img but it is not working.
<script src="jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
$('.jqte_editor').on('mouseup', 'img', function() {
$('.jqte_editor img').draggable().resizable();
});
but it says resizable is not recognized.
Edit
actually in this case it says Draggable is not recognized whatever is coming from jqueryui
That means either jquery-ui-1.10.3.custom.js path is not correct or required modules draggable, resizable are not included
Add this and try
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
If doesn't work then you may have included other JS library with jQuery like Prototype or Mootools
Demo Link
Hope you added the jQuery lib too, because it not showing any error about .on()
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
Also instead of mouseup you can directly have
$(document).ready(function () {
$('.jqte_editor img').draggable().resizable();
});
Check the working sample fiddle here.

jQuery .slideDown executes twice instead of once

I'm new to jquery and bumped into a problem i can't fix
I want that on pageload my content is sliding down so i use the next code:
$(document).ready(function () {
$("#content").hide();
$("#content").slideDown(1000);
});
when i load the page the content slides down narmally, than the content gets hidden and slides down again.
When i go to the css and do #content{display: none;} instead of $("#content").hide(); everything works fine. (can't use this for browsers without js)
Does anyone know the cause of this?
Thanks!
You are saying that everything works fine while using css #content{display: none;}
than i offer u to use Jquery .css() method( http://api.jquery.com/css/ )..
u can use it like :
$(document).ready(function () {
$("#content").css( { 'display' : 'none' } );
$("#content").slideDown(1000);
});
sipmle as that.
and i also agree with #Billy Moon , it can be a browser specific bug or u may be calling a page refresh command, somewhere within ur code.
Your code has no problem inside. It's somewhere else in your code.
isn't that function call in some function that is called twice?

jCarousel and Fancybox

On one of my content pages, I'm using the jCarousel and Fancybox JQuery plugins.
The problem is that only one of them works at a time, so I think there must be a conflict.
This is the code used:
<script src="js/jquery.jcarousel.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('.showcase').jcarousel({
start: 1
});
});
</script>
<script>
$(document).ready(function() {
$('.fancybox-form').attr("href", "contact.php").fancybox({
"width" : 400,
"height" : "90%",
"autoScale" : false,
"transitionIn" : "elastic",
"transitionOut" : "elastic",
"type" : "iframe"
});
});
</script>
Is there a conflict between the "jQuery(document).ready(function()" of the jcarousel script and the "$(document).ready(function()" of the fancybox script?
Any help on how to overcome the conflict (if this is the problem) would be appreciated.
Thanks, Mark.
It appears your problem is in the fact that jCarousel moves images in and out of view - causing a problem with fancybox. So the answer is that you cannot easily use both together (without re-writing the fancybox plug-in).
I would look at using a different carousel that already has the expand pop-up feature built-in.
On a side note, I would place all of the code in either
jQuery(document).ready(function()
or
$(document).ready(function()
for cleanliness.

Categories