The below code, seems to cancel each other out, the top one works but the bottom one doesn't but when I remove the top part it all works fine!
A working example of both can be found here: http://www.healthygit.com as you can see the fade on the menu doesn't work but the accordion does... Does anyone know what's causing this?
<script>
$(function() {
$('#slidorion').slidorion({
first: 2,
easing: 'easeInOutCubic',
effect: 'random'
});
});
</script>
<title>Healthy Git | Health And Fitness Guide</title>
</head>
<body>
<div id="headerimage"></div>
<script type="text/javascript">
$(document).ready(function($){
$('.megamenu').megaMenuCompleteSet({
menu_speed_show : 300, // Time (in milliseconds) to show a drop down
menu_speed_hide : 200, // Time (in milliseconds) to hide a drop down
menu_speed_delay : 300, // Time (in milliseconds) before showing a drop down
menu_effect : 'hover_fade', // Drop down effect, choose between 'hover_fade', 'hover_slide', etc.
menu_click_outside : 1, // Clicks outside the drop down close it (1 = true, 0 = false)
menu_show_onload : 0 // Drop down to show on page load (type the number of the drop down, 0 for none)
});
});
</script>
Your javascript has errors in it.
Uncaught TypeError: Object [object Object] has no method 'megaMenuCompleteSet'
Either your menu is not loaded properly or not initialized, i guess.
You can debug javascript with Firebug(FF) or Inspect Element(Chrome)
I don't see anything specifically wrong, but it's hard to see without the rest of the code. My guess is that the slidorion function has not been added to the jQuery prototype, ie:
$.fn.slidorion = function() {
//do something
}
Related
I am building my website portfolio as a student website designer but literally cant figure out as to why when clicking on items on the homepage it makes you double click. You can click once anywhere and then click on what you want once like there is a layer on top of the page that you need to click on first or something.
As I don't know were the problem is i cant upload the code for the whole of my site so here is the whole site in a zip:
https://www.dropbox.com/s/n695ote8nbeol96/Portfolio%20Website.zip?dl=0
Or you can view the source on my website at:
http://www.liam-dean.com
website is half done so don't worry if things are missing.
Many thanks.
The problem is in coreweb-ui.js:
if( $(".navigation").css("margin-left") != 0 ){
closeMenu();
}
It looks like you want to close the navigation if it is open but there is no element in the DOM that matches '.navigation'.
You should change this to check there is an element with the class "navigation" and that the element's margin is not 0:
if( $('.navigation').length && $(".navigation").css("margin-left") != 0 ){
closeMenu();
}
You have this function in the coreweb-ui.js which is throwing an error the first time you click on the images:
function closeMenu(){
$("#portfolio, .cover, .page, .navigation, .bigBg").animate({'margin-left' : '0px'}, 500, 'easeOutExpo');
$(".btMenu").attr('modo','off');
}
this line errors out the first time:
$("#portfolio, .cover, .page, .navigation, .bigBg").animate({'margin-left' : '0px'}, 500, 'easeOutExpo');
}
and then there is another bug in the same file:
event:
$("a").click(function(e) {
this condition is missing a =
} else if (destino = "_mail") {
the error that you see in the console stops the page from navigating the first time:
Uncaught TypeError: f.easing[i.animatedProperties[this.prop]] is not a function
I wrote a little script that observes clicks and blinds up/down according to the 'display' property, and also added a queue-to-end parameter to the blindUp in order to avoid even more serious display issues. This is obviously not the way to implement this, as display bugs appear if click events are invoked in the middle of the effect.. This is the code:
<script type="text/javascript">
$$('#leftnav_container #modules h2').each(function(El){
El.observe('click',function(){
container = this.next('div');
display = container.getStyle('display');
if(display == 'none'){
container.blindDown({duration: 0.3});
}else{
container.blindUp({duration: 0.3, queue: 'end'});
}
})
});
</script>
Again, the problem is that I rely on 'display'. What is the proper way to this?
This should simplify it
$$('#leftnav_container #modules h2').invoke('observe','click',function(){
container = this.next('div');
Effect.toggle(container , 'blind', { duration: 0.3 });
});
Firstly if you are only running one method on all elements in the array returned from $$() then you can use the PrototypeJS method invoke().
http://api.prototypejs.org/language/Enumerable/prototype/invoke/
Then Effect.toggle() will check if the element is visible and do the appropriate up/down effect.
Try this out and let me know if it works for you.
i have designed a website. it is now live with http://innovakota.6te.net
I have used some java script on this for sliding the pics. it is running good on localhost. but when i am running on server, the slider is not working.
The javascript code is as follow:
<script type="text/javascript">
$(document).ready(function() {
$().piroBox({
my_speed: 400, //animation speed
bg_alpha: 0.1, //background opacity
slideShow : false, // true == slideshow on, false == slideshow off
slideSpeed : 4, //slideshow duration in seconds(3 to 6 Recommended)
close_all : '.piro_close,.piro_overlay'// add class .piro_overlay(with comma)if you want overlay click close piroBox
});
});
</script>
I have tried it on three hostings but the same problem is coming. i am attaching the local host snapshot also.
Please help me guys
I think you need to clean your jquery.custom.js
Uncaught SyntaxError: Unexpected token ILLEGAL
Garbage in the JS file (http://innovakota.6te.net/lib/jquery.custom.js) - you need to take a look at it
�
//Wave slider call ----------------------------------------------------樀儀甀攀爀礀⠀搀漀挀甀洀攀渀琀⤀⸀爀攀愀搀礀⠀昀甀渀挀琀椀漀渀⠀⤀ 笀�
jQuery('.waveshow').nivoSlider({ऀऀ攀昀昀攀挀琀㨀✀猀氀椀挀攀䐀漀眀渀✀Ⰰ�
slices:15,ऀऀ愀渀椀洀匀瀀攀攀搀㨀 Ⰰ�
pauseTime:5000,ऀऀ搀椀爀攀挀琀椀漀渀一愀瘀㨀琀爀甀攀Ⰰ ⼀⼀一攀砀琀 ☀ 倀爀攀瘀�
directionNavHide:true, //Only show on hoverऀऀ挀漀渀琀爀漀氀一愀瘀㨀昀愀氀猀攀Ⰰ ⼀⼀Ⰰ㈀Ⰰ㌀⸀⸀⸀�
keyboardNav:true, //Use left & right arrowsऀऀ瀀愀甀猀攀伀渀䠀漀瘀攀爀㨀琀爀甀攀Ⰰ ⼀⼀匀琀漀瀀 愀渀椀洀愀琀椀漀渀 眀栀椀氀攀 栀漀瘀攀爀椀渀最�
manualAdvance:false, //Force manual transitionsऀऀ挀愀瀀琀椀漀渀伀瀀愀挀椀琀礀㨀 ⸀㠀Ⰰ ⼀⼀唀渀椀瘀攀爀猀愀氀 挀愀瀀琀椀漀渀 漀瀀愀挀椀琀礀�
beforeChange: function(){},ऀऀ愀昀琀攀爀䌀栀愀渀最攀㨀 昀甀渀挀琀椀漀渀⠀⤀笀紀Ⰰ�
slideshowEnd: function(){} //Triggers after all slides have been shownऀ紀⤀㬀�
});�
�
Ok, I'm trying to modify some already written jQuery - as background, I know Javascript decently, but I'm only so-so with jQuery. My understanding of this code is that there's a scrolling bar, which will change every 6 seconds. I am unsure if there's any video specific code in here though - right now the scrollbar has a video embedded on one of the panes, which is clicked on.
What I am trying to do, is set up an image (currently inside <div class=vid>, not shown), which when it is clicked, will stop the paning, UNTIL one of the buttons at the bottom is clicked, and it will also play a flash video.
Here's the code:
<script type="text/javascript">
jQuery(document).ready(function() {
var scroll_item = jQuery("#chained").scrollable({circular: true, mousewheel: false}).navigator().autoscroll({
interval: 6000,
autoplay: false,
autopause: false
});
window.scroll_control = scroll_item.data("scrollable");
scroll_control.play();
var $playBtn = $('#p-p-btn');
$playBtn.click(function(){
if($(this).hasClass('play')){
$(this).addClass('pause');
$(this).removeClass('play');
scroll_control.play();
} else if($(this).hasClass('pause')) {
$(this).addClass('play');
$(this).removeClass('pause');
scroll_control.stop();
};
});
jQuery('#chained').hover(
function() { scroll_control.stop(); },
function() {
if ($playBtn.hasClass('pause')) {
scroll_control.play();
}
}
);
});
</script>
I believe all I have to do is add a condition which will determine if the image has been clicked (it is in <div class=vid>, but I am going to give it an id as well probably), which will turn the paning off (perhaps by "clicking" the play/off button?), and it will also launch the video with an auto play setting.
Does that sound accurate?
How would I turn the paning off?
I don't fully understand the code, because i don't know the whole context.
But try to add this in your document ready:
$("#YOURIMAGEID").bind("click",function(){
scroll_control.stop();
$('#p-p-btn').addClass('play');
$('#p-p-btn').removeClass('pause');
//other logic
});
This answer has been taken from this post:
Fancybox problem on iPhone
This was voted as best answer but I am new and still learning at js and I am having such a difficult time putting this all together, can someone help me with some more detailed instructions?
Fancybox attempts to auto resize and center itself everytime that the
browser window is resized, and this event gets triggered a lot on
iPads and iPhones. For fancy box 1.3.4, the code which controls this
is line 608: $(window).bind("resize.fb", $fancybox.resize);
To fix the issue, I modified this part of the fancybox JS, and added
another option called "resizeOnWindowResize", which you can set to
false for iPad and iPhone users, or just disable all together.
if(currentOpts.resizeOnWindowResize) { $(window).bind("resize.fb",
$fancybox.resize); } You must also add a default value for this
option in $.fn.fancybox.defaults hash map.
Then, when calling fancybox you can utilize this new option:
$('#fancybox_link').fancybox(${'scrolling': 'no',
width: 'auto',
height: 'auto',
centerOnScroll: false,
resizeOnWindowResize : false});
I got as far as go to line 608. I really do not know what to do next. What should the final product look like after you've added "resizeonwindowResize" and the if statement?
Add this:
if(currentOpts.resizeOnWindowResize) {
$(window).bind("resize.fb", $.fancybox.resize);
}
Where you find:
$(window).bind("resize.fb", $.fancybox.resize);
Near the bottom of:
$.fn.fancybox.defaults = { //blah blah blah options here.
onComplete : function(){},
onCleanup : function(){},
onClosed : function(){},
onError : function(){},
// Add this
resizeOnWindowResize: true
};
Then save and when you call the fancybox:
$('.photo_gallery a').fancybox({
resizeOnWindowResize: false
});
This is also an alternative. Just replace the $.fancybox.resize function to as follows. It's just adding a simple userAgent check to avoid the .center call for iPhones.
$.fancybox.resize = function() {
if (overlay.is(':visible')) {
overlay.css('height', $(document).height());
}
if(!(navigator.userAgent.match(/iPhone/i)) && !(navigator.userAgent.match(/iPod/i))) {
$.fancybox.center(true);
}
};