I have this HTML Link:
Fade and Pop
that uses jquery to bring up a popup box.
how can i make the box appear on body load?
here is the full jquery code:
(function($) {
/*---------------------------
Defaults for Reveal
----------------------------*/
/*---------------------------
Listener for data-reveal-id attributes
----------------------------*/
$('a[data-reveal-id]').live('click', function(e) {
e.preventDefault();
var modalLocation = $(this).attr('data-reveal-id');
$('#'+modalLocation).reveal($(this).data());
});
/*---------------------------
Extend and Execute
----------------------------*/
$.fn.reveal = function(options) {
var defaults = {
animation: 'fadeAndPop', //fade, fadeAndPop, none
animationspeed: 300, //how fast animtions are
closeonbackgroundclick: true, //if you click background will modal close?
dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
};
//Extend dem' options
var options = $.extend({}, defaults, options);
return this.each(function() {
/*---------------------------
Global Variables
----------------------------*/
var modal = $(this),
topMeasure = parseInt(modal.css('top')),
topOffset = modal.height() + topMeasure,
locked = false,
modalBG = $('.reveal-modal-bg');
/*---------------------------
Create Modal BG
----------------------------*/
if(modalBG.length == 0) {
modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal);
}
/*---------------------------
Open & Close Animations
----------------------------*/
//Entrance Animations
modal.bind('reveal:open', function () {
modalBG.unbind('click.modalEvent');
$('.' + options.dismissmodalclass).unbind('click.modalEvent');
if(!locked) {
lockModal();
if(options.animation == "fadeAndPop") {
modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'});
modalBG.fadeIn(options.animationspeed/2);
modal.delay(options.animationspeed/2).animate({
"top": $(document).scrollTop()+topMeasure + 'px',
"opacity" : 1
}, options.animationspeed,unlockModal());
}
if(options.animation == "fade") {
modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure});
modalBG.fadeIn(options.animationspeed/2);
modal.delay(options.animationspeed/2).animate({
"opacity" : 1
}, options.animationspeed,unlockModal());
}
if(options.animation == "none") {
modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure});
modalBG.css({"display":"block"});
unlockModal()
}
}
modal.unbind('reveal:open');
});
//Closing Animation
modal.bind('reveal:close', function () {
if(!locked) {
lockModal();
if(options.animation == "fadeAndPop") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"top": $(document).scrollTop()-topOffset + 'px',
"opacity" : 0
}, options.animationspeed/2, function() {
modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
unlockModal();
});
}
if(options.animation == "fade") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"opacity" : 0
}, options.animationspeed, function() {
modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure});
unlockModal();
});
}
if(options.animation == "none") {
modal.css({'visibility' : 'hidden', 'top' : topMeasure});
modalBG.css({'display' : 'none'});
}
}
modal.unbind('reveal:close');
});
/*---------------------------
Open and add Closing Listeners
----------------------------*/
//Open Modal Immediately
modal.trigger('reveal:open')
//Close Modal Listeners
var closeButton = $('.' + options.dismissmodalclass).bind('click.modalEvent', function () {
modal.trigger('reveal:close')
});
if(options.closeonbackgroundclick) {
modalBG.css({"cursor":"pointer"})
modalBG.bind('click.modalEvent', function () {
modal.trigger('reveal:close')
});
}
$('body').keyup(function(e) {
if(e.which===27){ modal.trigger('reveal:close'); } // 27 is the keycode for the Escape key
});
/*---------------------------
Animations Locks
----------------------------*/
function unlockModal() {
locked = false;
}
function lockModal() {
locked = true;
}
});//each call
}//orbit plugin call
})(jQuery);
$('#myModal').click(); or $('#myModal').reveal(); will do this
You can trigger the click event for the link, or just execute the bound function for click($('#myModal').reveal(); in your case if no other data attributes exist for the given link).
Related
Is there anyway that i can refer to the "mouseWheelEvent" property from the "beforeSlide" method?
$(document).ready( function() {
$(".main").hide();
var des = false;
var scorll = false;
var slider = $.fn.fsvs({
speed : 1000,
bodyID : 'fsvs-body',
selector : '> .slide',
mouseSwipeDisance : 40,
afterSlide : function(){},
beforeSlide : () => {
if($("#slide-3").hasClass("active-slide") && !des){
$('#fsvs-body').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 > 0) {
console.log("up");
}
else{
$(".main").fadeIn(200, function(){
$("html").addClass("des");
$("#fsvs-body").addClass("des");
des = true;
scorll = false;
$('html, body').animate({
scrollTop: 200
}, 200);
console.log(scorll);
});
}
$('#fsvs-body').unbind('mousewheel');
});
}
},
endSlide : function(){},
mouseWheelEvents : scorll,
mouseWheelDelay : false,
scrollableArea : 'scrollable',
mouseDragEvents : true,
touchEvents : true,
arrowKeyEvents : true,
pagination : false,
nthClasses : false,
detectHash : true,
});
$(window).scroll(function(){
console.log($(document).scrollTop());
if(des){
if($(document).scrollTop() == 0){
$(".main").fadeOut(200, function(){
$("html").removeClass("des");
$("#fsvs-body").removeClass("des");
des = false;
console.log(scorll);
});
}
}
});
});
I want to toggle the mouseWheelEvent in beforeSlide and in $(window).scroll as i want the mouse wheel to be true in $(window).scroll and be false in beforeSlide.
Good day,
I am very new to the world of coding, and need some help from experts. Below is the javascript error I have noticed in the jQuery(document) file:
Uncaught TypeError: Cannot read property 'indexOf' of undefined
The error is being pointed to this: if (url.indexOf("?") != -1) {
Your assistance will be much appreciated.
jQuery(document).ready(
//tabs
function($) {
"use strict";
$('.tabber-container').each(function() {
$(this).find(".tabber-content").hide();
$(this).find("ul.tabs li:first").addClass("active").show();
$(this).find(".tabber-content:first").show();
});
$("ul.tabs li").click(
function(e) {
$(this).parents('.tabber-container').find("ul.tabs li")
.removeClass("active");
$(this).addClass("active");
$(this).parents('.tabber-container').find(
".tabber-content").hide();
var activeTab = $(this).find("a").attr("href");
$(this).parents('.tabber-container').find(activeTab)
.fadeIn();
e.preventDefault();
});
$("ul.tabs li a").click(function(e) {
e.preventDefault();
});
//ticker
function tick(){
$("ul.ticker-list li:first").animate({marginLeft : '-200px'},400,function() {$(this).detach().appendTo("ul.ticker-list").removeAttr("style");
});
}
var interval = setInterval(tick, 5000);
$('ul.ticker-list li').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval(tick, 5000);
});
//Gallery slider
$('.post-page-gallery-thumbnails').flexslider({
animation: 'slide',
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 121,
itemMargin: 1,
directionNav: true,
asNavFor: '.post-page-gallery-slider'
});
$('.post-page-gallery-slider').flexslider({
animation: 'fade',
controlNav: false,
animationLoop: false,
slideshow: false,
sync: '.post-page-gallery-thumbnails'
});
//carousel
$('.carousel').flexslider({
animation : 'slide',
itemWidth : 161,
itemMargin : 16,
move : 2,
slideshow : false,
start : function() {
$('.carousel li').css('visibility', 'visible');
},
});
//video type page carousel
$('.tv-carousel').flexslider({
animation : 'slide',
itemWidth : 161,
itemMargin : 16,
move : 2,
slideshow : false,
controlNav : false
});
//video type page ajax
$('.ajax').click(
function(event) {
event.preventDefault();
var post_id = $(this).attr("href");
jQuery.ajax({
post : post_id,
type : "POST",
data : {id : post_id},
success : function(output) {
$(".tv-video-wrapper").replaceWith(
$('.tv-video-wrapper', output));
}
});
});
//keyboard navigation next prev
$(document).keydown(function(e) {
var url = false;
if (e.which == 37) { // Left arrow key code
url = $('.previous-title a').attr('href');
}
else if (e.which == 39) { // Right arrow key code
url = $('.next-title a').attr('href');
}
if (url) {
window.location = url;
}
});
//menu button for responsive mobile
$("#mob-menu").click(function() {
$("#main-nav ul").toggleClass("active");
$(this).toggleClass("active");
});
//back to top button
$('.back-2-top').click(function() {
$('html, body').animate({
scrollTop : 0
}, 'fast');
return false;
});
//hover for Three-posts
$(".three-posts li").hover(
function () {
$(".three-posts li").removeClass('three-hover');
$(this).addClass('three-hover');
});
//simple IE fix for iframe embeds z-index
$('iframe').each(function() {
var url = $(this).attr("src");
var char = "?";
if (url.indexOf("?") != -1) {
var char = "&";
}
$(this).attr("src", url + char + "wmode=transparent");
});
});
Use:
var url = this.contentWindow.location.href;
to get the URL instead of:
var url =$(this).attr("src");
Hi I had some Java scripts specific to a view. However, the script doesnt execute when angularjs loads the view. First time script run but script didnt execute when changed scope .The main index.html dont include this javascript code. This code in home.html . Index.html loads home.html but only one time working this javascript code.
$('#layerslider').layerSlider({
skin : 'fullwidth',
hoverPrevNext : true,
navStartStop : false,
navButtons : false,
autoPlayVideos : false,
animateFirstLayer : false
});
var $carousel = $('.recent-blog-jc, .recent-work-jc');
var scrollCount;
function adjustScrollCount() {
if( $(window).width() < 768 ) {
scrollCount = 1;
} else {
scrollCount = 3;
}
}
function adjustCarouselHeight() {
$carousel.each(function() {
var $this = $(this);
var maxHeight = -1;
$this.find('li').each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
$this.height(maxHeight);
});
}
function initCarousel() {
adjustCarouselHeight();
adjustScrollCount();
var i = 0;
var g = {};
$carousel.each(function() {
i++;
var $this = $(this);
g[i] = $this.jcarousel({
animation : 600,
scroll : scrollCount
});
$this.jcarousel('scroll', 0);
$this.prev().find('.jcarousel-prev').bind('active.jcarouselcontrol', function() {
$(this).addClass('active');
}).bind('inactive.jcarouselcontrol', function() {
$(this).removeClass('active');
}).jcarouselControl({
target: '-='+scrollCount,
carousel: g[i]
});
$this.prev().find('.jcarousel-next').bind('active.jcarouselcontrol', function() {
$(this).addClass('active');
}).bind('inactive.jcarouselcontrol', function() {
$(this).removeClass('active');
}).jcarouselControl({
target: '+='+scrollCount,
carousel: g[i]
});
$this.touchwipe({
wipeLeft: function() {
$this.jcarousel('scroll','+='+scrollCount);
},
wipeRight: function() {
$this.jcarousel('scroll','-='+scrollCount);
}
});
});
}
$(function(){
$(window).load(function(){
initCarousel();
});
});
$(window).resize(function () {
$carousel.each(function() {
var $this = $(this);
$this.jcarousel('destroy');
});
initCarousel();
});
Just add $scope.$apply() as close to the async event as possible, though keep in mind this is not best practice (you should try to do everything you can "the Angular way").
I fix this problem with angular directive. I get element with angular.element(document.querySelector('....')). I used ng-repeat in the directive template.
directive('carousel', function () {
return {
restrict: 'A',
replace: true,
transclude: false,
template: ' <div class="blank floated"><div class="four columns carousel-intro"><section class="entire"><h3>{{homepage.header4}}</h3><p>{{homepage.text4}}</p></section><div class="carousel-navi"><div id="work-prev" class="arl active jcarousel-prev"><i class="icon-chevron-left"></i></div><div id="work-next" class="arr active jcarousel-next"><i class="icon-chevron-right"></i></div></div><div class="clearfix"></div></div><section class="jcarousel recent-work-jc"><ul><li class="four columns" ng-repeat="work in works"><h5>{{work.title}}</h5><span>{{work.type}}</span></figcaption></figure></li></ul></section></div>',
link: function link(scope, element, attrs) {
var container = $(element);
var carousel = container.children('.jcarousel')
carousel.jcarousel({
wrap: 'circular'
});
scope.$watch(attrs.images, function (value) {
carousel.jcarousel('reload');
});
angular.element(document.querySelector('#work-prev')).children('.jcarousel-control-prev')
.jcarouselControl({
target: '-=1'
});
angular.element(document.querySelector('#work-next')).children('.jcarousel-control-next')
.jcarouselControl({
target: '-=1'
});
}
}
});
How can I modify this jsfiddle so that it will:
a) highlight the active <li>
b) Make it possible to activate a tab content at page load (a tab is already opened when the page is loaded for the first time)
Thank you!
$(document).ready(function() {
var $panels = $('.panels > .panel');
$('#menu > li').on('click', 'a', function() {
$panels.filter('.'+this.id).trigger('togglePanel');
});
$panels
.on('togglePanel', function(){
var $this = $(this)
, $activePanels = $panels.filter(':visible').not($this);
if ($activePanels.length) {
$activePanels
.one('panelHidden', function(){
$this.is(':visible')
? $this.trigger('hidePanel')
: $this.trigger('showPanel');
})
.trigger('hidePanel');
} else {
$this.is(':visible')
? $this.trigger('hidePanel')
: $this.trigger('showPanel');
}
})
.on('hidePanel', function(){
var $this = $(this);
$this.find('.content').fadeOut(500, function() {
$this.animate({
'width': 'hide'
}, 1000, function(){
$this.trigger('panelHidden');
});
});
})
.on('showPanel', function(){
var $this = $(this);
$this.animate({
'width': 'show'
}, 1000, function() {
$this.find('.content').fadeIn(500, function(){
$this.trigger('panelShown');
});
});
});
$panels.find('.content .close').on('click', function() {
$(this).closest('.panel').trigger('togglePanel');
});
});
I have a menu that shows on click (similar to the fb mobile menu). When you click anywhere on the viewport, the menu hides again and the link is disabled (i want to unbind the link because the a links on my viewport will not work without this click function unbound)
However, when i click the showmenu button, i want to be able to bind the viewport click again.
$(function(){
var menuStatus;
$("a.showMenu").click(function(){
if(menuStatus != true){
$("#menu").animate({
height: "44px",
}, 300, function(){menuStatus = true});
return false;
} else {
$("#menu").animate({
height: "0px",
}, 300, function(){menuStatus = false});
return false;
}
});
$("#viewport").bind('click.navclose', function(){
$(this).unbind('click.navclose');
if(menuStatus = true){
$("#menu").animate({
height: "0px",
}, 300, function(){menuStatus = false});
return false;
}
});
});
Try this, hope will make sense
$(function() {
var menuStatus;
$("a.showMenu").click(function() {
$("#viewport").bind('click', handler);
if (menuStatus != true) {
$("#menu").animate({
height: "44px",
}, 300, function() {
menuStatus = true
});
return false;
} else {
$("#menu").animate({
height: "0px",
}, 300, function() {
menuStatus = false
});
return false;
}
});
$("#viewport").bind('click', handler);
var handler = function() {
$(this).unbind('click');
if (menuStatus = true) {
$("#menu").animate({
height: "0px",
}, 300, function() {
menuStatus = false
});
return false;
}
}
});
look at the updated demo