I have been trying to make a dropdown menu with HTML form/option. When the user clicks on the option desired, it should open a new tab in the same window. I’m currently using a pre-made plugin (made some alterations to the design of my project and adapted to the rest of the code), and managed to make it almost work. The thing is that it doesn’t open in a new tab: it opens on the same page (like _self).
Below, is the HTML code I’m using, as well the javascript file.
I’m really struggling to find a solution, though I know that it might be an easy one. I tried several things but none of them worked.
<!DOCTYPE HTML>
<html>
<head>
<!-- begin meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Ex. 1</title>
<!-- end meta -->
<!-- begin CSS -->
<link href="css/style_dropdown.css" type="text/css" rel="stylesheet" />
<!-- end CSS -->
<!-- begin JS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="js/modernizr-2.0.6.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.dropdown.js"></script>
<script>
$( function() {
$( '#cd-dropdown' ).dropdown( {
gutter : 5,
stack : true,
slidingIn : 100,
onOptionSelect : function( opt ) {
window.location = opt.data( 'value' );
}
} );
});
<!-- end JS -->
<head>
<body>
<form>
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Social</option>
<option value="https://www.facebook.com" class="icon-facebook">Facebook</option>
<option value="https://plus.google.com/" class="icon-googleplus">Google Plus</option>
<option value="https://soundcloud.com/" class="icon-soundcloud">Soundcloud</option>
<option value="https://www.tumblr.com/" class="icon-tumblr">Tumblr</option>
<option value="http://www.youtube.com/" class="icon-youtube">You Tube</option>
</select>
</form>
</body>
</html>
And now the .js file
/**
JS DROPDOWN MENU
*/
;( function( $, window, undefined ) {
'use strict';
$.DropDown = function( options, element ) {
this.$el = $( element );
this._init( options );
};
// the options
$.DropDown.defaults = {
speed : 300,
easing : 'ease',
gutter : 0,
// initial stack effect
stack : true,
// delay between each option animation
delay : 0,
// random angle and positions for the options
random : false,
// rotated [right||left||false] : the options will be rotated to thr right side or left side.
// make sure to tune the transform origin in the stylesheet
rotated : false,
// effect to slide in the options. value is the margin to start with
slidingIn : false,
onOptionSelect : function(opt) { return false; }
};
$.DropDown.prototype = {
_init : function( options ) {
// options
this.options = $.extend( true, {}, $.DropDown.defaults, options );
this._layout();
this._initEvents();
},
_layout : function() {
var self = this;
this.minZIndex = 1000;
var value = this._transformSelect();
this.opts = this.listopts.children( 'li' );
this.optsCount = this.opts.length;
this.size = { width : this.dd.width(), height : this.dd.height() };
var elName = this.$el.attr( 'name' ), elId = this.$el.attr( 'id' ),
inputName = elName !== undefined ? elName : elId !== undefined ? elId : 'cd-dropdown-' + ( new Date() ).getTime();
this.inputEl = $( '<input type="hidden" name="' + inputName + '" value="' + value + '"></input>' ).insertAfter( this.selectlabel );
this.selectlabel.css( 'z-index', this.minZIndex + this.optsCount );
this._positionOpts();
if( Modernizr.csstransitions ) {
setTimeout( function() { self.opts.css( 'transition', 'all ' + self.options.speed + 'ms ' + self.options.easing ); }, 25 );
}
},
_transformSelect : function() {
var optshtml = '', selectlabel = '', value = -1;
this.$el.children( 'option' ).each( function() {
var $this = $( this ),
val = isNaN( $this.attr( 'value' ) ) ? $this.attr( 'value' ) : Number( $this.attr( 'value' ) ) ,
classes = $this.attr( 'class' ),
selected = $this.attr( 'selected' ),
label = $this.text();
if( val !== -1 ) {
optshtml +=
classes !== undefined ?
'<li data-value="' + val + '"><span class="' + classes + '">' + label + '</span></li>' :
'<li data-value="' + val + '"><span>' + label + '</span></li>';
}
if( selected ) {
selectlabel = label;
value = val;
}
} );
this.listopts = $( '<ul/>' ).append( optshtml );
this.selectlabel = $( '<span/>' ).append( selectlabel );
this.dd = $( '<div class="cd-dropdown"/>' ).append( this.selectlabel, this.listopts ).insertAfter( this.$el );
this.$el.remove();
return value;
},
_positionOpts : function( anim ) {
var self = this;
this.listopts.css( 'height', 'auto' );
this.opts
.each( function( i ) {
$( this ).css( {
zIndex : self.minZIndex + self.optsCount - 1 - i,
top : self.options.slidingIn ? ( i + 1 ) * ( self.size.height + self.options.gutter ) : 0,
left : 0,
marginLeft : self.options.slidingIn ? i % 2 === 0 ? self.options.slidingIn : - self.options.slidingIn : 0,
opacity : self.options.slidingIn ? 0 : 1,
transform : 'none'
} );
} );
if( !this.options.slidingIn ) {
this.opts
.eq( this.optsCount - 1 )
.css( { top : this.options.stack ? 9 : 0, left : this.options.stack ? 4 : 0, width : this.options.stack ? this.size.width - 8 : this.size.width, transform : 'none' } )
.end()
.eq( this.optsCount - 2 )
.css( { top : this.options.stack ? 6 : 0, left : this.options.stack ? 2 : 0, width : this.options.stack ? this.size.width - 4 : this.size.width, transform : 'none' } )
.end()
.eq( this.optsCount - 3 )
.css( { top : this.options.stack ? 3 : 0, left : 0, transform : 'none' } );
}
},
_initEvents : function() {
var self = this;
this.selectlabel.on( 'mousedown.dropdown', function( event ) {
self.opened ? self.close() : self.open();
return false;
} );
this.opts.on( 'click.dropdown', function() {
if( self.opened ) {
var opt = $( this );
self.options.onOptionSelect( opt );
self.inputEl.val( opt.data( 'value' ) );
self.selectlabel.html( opt.html() );
self.close();
}
} );
},
open : function() {
var self = this;
this.dd.toggleClass( 'cd-active' );
this.listopts.css( 'height', ( this.optsCount + 1 ) * ( this.size.height + this.options.gutter ) );
this.opts.each( function( i ) {
$( this ).css( {
opacity : 1,
top : self.options.rotated ? self.size.height + self.options.gutter : ( i + 1 ) * ( self.size.height + self.options.gutter ),
left : self.options.random ? Math.floor( Math.random() * 11 - 5 ) : 0,
width : self.size.width,
marginLeft : 0,
transform : self.options.random ?
'rotate(' + Math.floor( Math.random() * 11 - 5 ) + 'deg)' :
self.options.rotated ?
self.options.rotated === 'right' ?
'rotate(-' + ( i * 5 ) + 'deg)' :
'rotate(' + ( i * 5 ) + 'deg)'
: 'none',
transitionDelay : self.options.delay && Modernizr.csstransitions ? self.options.slidingIn ? ( i * self.options.delay ) + 'ms' : ( ( self.optsCount - 1 - i ) * self.options.delay ) + 'ms' : 0
} );
} );
this.opened = true;
},
close : function() {
var self = this;
this.dd.toggleClass( 'cd-active' );
if( this.options.delay && Modernizr.csstransitions ) {
this.opts.each( function( i ) {
$( this ).css( { 'transition-delay' : self.options.slidingIn ? ( ( self.optsCount - 1 - i ) * self.options.delay ) + 'ms' : ( i * self.options.delay ) + 'ms' } );
} );
}
this._positionOpts( true );
this.opened = false;
}
}
$.fn.dropdown = function( options ) {
var instance = $.data( this, 'dropdown' );
if ( typeof options === 'string' ) {
var args = Array.prototype.slice.call( arguments, 1 );
this.each(function() {
instance[ options ].apply( instance, args );
});
}
else {
this.each(function() {
instance ? instance._init() : instance = $.data( this, 'dropdown', new $.DropDown( options, this ) );
});
}
return instance;
};
} )( jQuery, window );
Some initial problems
First, you cannot control whether it opens in a new window or in a new tab in the current window: that’s purely a browser setting. If you set the target to _blank, it’ll open in a new whatever (probably tab, as that’s the default behaviour of most modern browsers).
Second, your HTML is seriously broken, because the <head> contains a <script> tag which opens but does not close. (Also, the closing <head> tag is written as a second opening tag instead.)
Third, your example is not self-contained, because it is completely unworkable without the accompanying CSS.
An attempt at an answer
I can’t work out where you’re actually opening anything, in a new window or otherwise. Your form doesn’t have a submit button or anything similarly obviously useful. However, something as simple as adding target="_blank" to the opening <form> tag might well do the trick.
<form target="_blank">
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Social</option>
<option value="https://www.facebook.com" class="icon-facebook">Facebook</option>
<option value="https://plus.google.com/" class="icon-googleplus">Google Plus</option>
<option value="https://soundcloud.com/" class="icon-soundcloud">Soundcloud</option>
<option value="https://www.tumblr.com/" class="icon-tumblr">Tumblr</option>
<option value="http://www.youtube.com/" class="icon-youtube">You Tube</option>
</select>
</form>
Related
I am trying to customize the Divi theme for Wordpress.
In this project: http://dm-wp.com/vins-lelievre/, I'd like to have the logo and the menu color change to white if the active slide background is dark.
I would like to add a class to the body if the new active slide has the class "et_pb_bg_layout_dark".
Function already exists for adding color class to the slider container.
I think what I am missing is the event that makes the script run again to check the condition.
Can I insert the script in the integration field of the theme or shall I edit theme .js file?
Probably http://dm-wp.com/vins-lelievre/wp-content/themes/Divi/includes/builder/scripts/frontend-builder-scripts.js?ver=3.0.10
From my investigations, script would look like this.
I guess it's wrong or not complete:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery( document ).ready(function() {
if ( jQuery('#slide-home').hasClass( "et_pb_bg_layout_dark" ) ) {
jQuery('body').addClass('yourClassName');
}
});
</script>
Thanks for your help
This is the slider structure, where 'et_pb_bg_layout_light' is actually changed for 'et_pb_bg_layout_dark' inside 'et_pb_slider ' if 'et_pb_slide' has 'et_pb_bg_layout_dark'. Only CSS classes, I added the ID '#home-slide', but theoritically it shouldn't be necessary.
<div id="home-slide" class="et_pb_module et_pb_slider et_slider_auto et_slider_speed_7000 et_slider_auto_ignore_hover et_pb_fullwidth_slider_0">
<div class="et_pb_slides">
<div class="et_pb_slide et_pb_bg_layout_light et_pb_slider_with_text_overlay et_pb_slide_0 et-pb-active-slide" style='background-color:#ffffff;background-image:url(http://dm-wp.com/vins-lelievre/wp-content/uploads/2016/10/léquipe-des-vins-lelievre.jpg);'>
<div class="et_pb_container clearfix">
<div class="et_pb_slide_description">
<h2 class="et_pb_slide_title">DÉCOUVREZ LA MAISON LELIÈVRE</h2>
<div class="et_pb_slide_content">
<p style="text-align: right;">Une famille, un vignoble, une histoire,<br />
un savoir-faire, des vins…</p>
</div>
Découvrir
</div> <!-- .et_pb_slide_description -->
</div> <!-- .et_pb_container -->
</div> <!-- .et_pb_slide -->
<div class="et_pb_slide et_pb_bg_layout_dark et_pb_slider_with_overlay et_pb_slider_with_text_overlay et_pb_slide_1" style='background-color:#ffffff;background-image:url(http://dm-wp.com/vins-lelievre/wp-content/uploads/2016/10/david-lelievre-ca-nous-a-ouvert-des-marches-1433506900.jpg);'>
<div class="et_pb_slide_overlay_container"></div>
<div class="et_pb_container clearfix">
<div class="et_pb_slide_description">
<h2 class="et_pb_slide_title">BIENVENUE À LA CAVE</h2>
<div class="et_pb_slide_content">
<p style="text-align: right;">Découvrez nos vins de Lorraine et Côtes de Toul et nos spécialités régionales et internationales.</p>
</div>
Entrer
</div> <!-- .et_pb_slide_description -->
</div> <!-- .et_pb_container -->
</div> <!-- .et_pb_slide -->
<div class="et_pb_slide et_pb_bg_layout_dark et_pb_slider_with_text_overlay et_pb_slide_2" style='background-color:#000000;background-image:url(http://dm-wp.com/vins-lelievre/wp-content/uploads/2016/10/mirabelles-fraiches-1.jpg);'>
<div class="et_pb_container clearfix">
<div class="et_pb_slide_description">
<h2 class="et_pb_slide_title">ELLES SONT ARRIVÉES!!!</h2>
<div class="et_pb_slide_content">
<p style="text-align: right;">Les mirabelles fraîches 2016 sont là! Venez les chercher ou commandez directement en ligne</p>
</div>
Acheter
</div> <!-- .et_pb_slide_description -->
</div> <!-- .et_pb_container -->
</div> <!-- .et_pb_slide -->
</div> <!-- .et_pb_slides -->
</div> <!-- .et_pb_slider -->
You didn't have <div id="slide-home"></div> in your code.
When you click on button, if #slide-home has class .et_pb_bg_layout_dark, the background of body will change
body {
min-height: 200px;
border: 1px solid red;
}
body.yourClassName {
background: red;
}
<div id="slide-home" class="et_pb_bg_layout_dark"></div>
<button id="btn">check</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery( document ).ready(function() {
if ( jQuery('#slide-home').hasClass( "et_pb_bg_layout_dark" ) ) {
jQuery('body').addClass('yourClassName');
}
});
</script>
Here is a piece of the original visual builder javascript where I think I can find similar functions to the one I want to have. For example "et_slider_auto_rotate()" or the variable "tabs_animation". Anyone inspired to explain me how it works to get classes checked and added or removed on every slide change?
window.et_pb_init_modules = function() {
$.et_pb_simple_slider = function(el, options) {
var settings = $.extend( {
slide : '.et-slide', // slide class
arrows : '.et-pb-slider-arrows', // arrows container class
prev_arrow : '.et-pb-arrow-prev', // left arrow class
next_arrow : '.et-pb-arrow-next', // right arrow class
controls : '.et-pb-controllers a', // control selector
carousel_controls : '.et_pb_carousel_item', // carousel control selector
control_active_class : 'et-pb-active-control', // active control class name
previous_text : et_pb_custom.previous, // previous arrow text
next_text : et_pb_custom.next, // next arrow text
fade_speed : 500, // fade effect speed
use_arrows : true, // use arrows?
use_controls : true, // use controls?
manual_arrows : '', // html code for custom arrows
append_controls_to : '', // controls are appended to the slider element by default, here you can specify the element it should append to
controls_below : false,
controls_class : 'et-pb-controllers', // controls container class name
slideshow : false, // automattic animation?
slideshow_speed : 7000, // automattic animation speed
show_progress_bar : false, // show progress bar if automattic animation is active
tabs_animation : false,
use_carousel : false
}, options );
var $et_slider = $(el),
$et_slide = $et_slider.closest_descendent( settings.slide ),
et_slides_number = $et_slide.length,
et_fade_speed = settings.fade_speed,
et_active_slide = 0,
$et_slider_arrows,
$et_slider_prev,
$et_slider_next,
$et_slider_controls,
$et_slider_carousel_controls,
et_slider_timer,
controls_html = '',
carousel_html = '',
$progress_bar = null,
progress_timer_count = 0,
$et_pb_container = $et_slider.find( '.et_pb_container' ),
et_pb_container_width = $et_pb_container.width(),
is_post_slider = $et_slider.hasClass( 'et_pb_post_slider' );
$et_slider.et_animation_running = false;
$.data(el, "et_pb_simple_slider", $et_slider);
$et_slide.eq(0).addClass( 'et-pb-active-slide' );
if ( ! settings.tabs_animation ) {
if ( !$et_slider.hasClass('et_pb_bg_layout_dark') && !$et_slider.hasClass('et_pb_bg_layout_light') ) {
$et_slider.addClass( et_get_bg_layout_color( $et_slide.eq(0) ) );
}
}
if ( settings.use_arrows && et_slides_number > 1 ) {
if ( settings.manual_arrows == '' )
$et_slider.append( '<div class="et-pb-slider-arrows"><a class="et-pb-arrow-prev" href="#">' + '<span>' +settings.previous_text + '</span>' + '</a><a class="et-pb-arrow-next" href="#">' + '<span>' + settings.next_text + '</span>' + '</a></div>' );
else
$et_slider.append( settings.manual_arrows );
$et_slider_arrows = $et_slider.find( settings.arrows );
$et_slider_prev = $et_slider.find( settings.prev_arrow );
$et_slider_next = $et_slider.find( settings.next_arrow );
$et_slider_next.click( function(){
if ( $et_slider.et_animation_running ) return false;
$et_slider.et_slider_move_to( 'next' );
return false;
} );
$et_slider_prev.click( function(){
if ( $et_slider.et_animation_running ) return false;
$et_slider.et_slider_move_to( 'previous' );
return false;
} );
// swipe support requires et-jquery-touch-mobile
$et_slider.find( settings.slide ).on( 'swipeleft', function() {
$et_slider.et_slider_move_to( 'next' );
});
$et_slider.find( settings.slide ).on( 'swiperight', function() {
$et_slider.et_slider_move_to( 'previous' );
});
}
if ( settings.use_controls && et_slides_number > 1 ) {
for ( var i = 1; i <= et_slides_number; i++ ) {
controls_html += '<a href="#"' + ( i == 1 ? ' class="' + settings.control_active_class + '"' : '' ) + '>' + i + '</a>';
}
controls_html =
'<div class="' + settings.controls_class + '">' +
controls_html +
'</div>';
if ( settings.append_controls_to == '' )
$et_slider.append( controls_html );
else
$( settings.append_controls_to ).append( controls_html );
if ( settings.controls_below )
$et_slider_controls = $et_slider.parent().find( settings.controls );
else
$et_slider_controls = $et_slider.find( settings.controls );
et_maybe_set_controls_color( $et_slide.eq(0) );
$et_slider_controls.click( function(){
if ( $et_slider.et_animation_running ) return false;
$et_slider.et_slider_move_to( $(this).index() );
return false;
} );
}
if ( settings.use_carousel && et_slides_number > 1 ) {
for ( var i = 1; i <= et_slides_number; i++ ) {
slide_id = i - 1;
image_src = ( $et_slide.eq(slide_id).data('image') !== undefined ) ? 'url(' + $et_slide.eq(slide_id).data('image') + ')' : 'none';
carousel_html += '<div class="et_pb_carousel_item ' + ( i == 1 ? settings.control_active_class : '' ) + '" data-slide-id="'+ slide_id +'">' +
'<div class="et_pb_video_overlay" href="#" style="background-image: ' + image_src + ';">' +
'<div class="et_pb_video_overlay_hover"></div>' +
'</div>' +
'</div>';
}
carousel_html =
'<div class="et_pb_carousel">' +
'<div class="et_pb_carousel_items">' +
carousel_html +
'</div>' +
'</div>';
$et_slider.after( carousel_html );
$et_slider_carousel_controls = $et_slider.siblings('.et_pb_carousel').find( settings.carousel_controls );
$et_slider_carousel_controls.click( function(){
if ( $et_slider.et_animation_running ) return false;
var $this = $(this);
$et_slider.et_slider_move_to( $this.data('slide-id') );
return false;
} );
}
if ( settings.slideshow && et_slides_number > 1 ) {
$et_slider.hover( function() {
if ( $et_slider.hasClass( 'et_slider_auto_ignore_hover' ) ) {
return;
}
$et_slider.addClass( 'et_slider_hovered' );
if ( typeof et_slider_timer != 'undefined' ) {
clearInterval( et_slider_timer );
}
}, function() {
if ( $et_slider.hasClass( 'et_slider_auto_ignore_hover' ) ) {
return;
}
$et_slider.removeClass( 'et_slider_hovered' );
et_slider_auto_rotate();
} );
}
et_slider_auto_rotate();
function et_slider_auto_rotate(){
if ( settings.slideshow && et_slides_number > 1 && ! $et_slider.hasClass( 'et_slider_hovered' ) ) {
et_slider_timer = setTimeout( function() {
$et_slider.et_slider_move_to( 'next' );
}, settings.slideshow_speed );
}
}
I have a slider, I want to make them responsive the problem is the size of slider is into the jQuery file
sow how I can edit the code ?
code of jQuery
(function( window, $, undefined ) {
var $event = $.event, resizeTimeout;
$event.special.smartresize = {
setup: function() {
$(this).bind( "resize", $event.special.smartresize.handler );
},
teardown: function() {
$(this).unbind( "resize", $event.special.smartresize.handler );
},
handler: function( event, execAsap ) {
// Save the context
var context = this,
args = arguments;
// set correct event type
event.type = "smartresize";
if ( resizeTimeout ) { clearTimeout( resizeTimeout ); }
resizeTimeout = setTimeout(function() {
jQuery.event.handle.apply( context, args );
}, execAsap === "execAsap"? 0 : 100 );
}
};
$.fn.smartresize = function( fn ) {
return fn ? this.bind( "smartresize", fn ) : this.trigger( "smartresize", ["execAsap"] );
};
$.Slideshow = function( options, element ) {
this.$el = $( element );
/***** images ****/
// list of image items
this.$list = this.$el.find('ul.ei-slider-large');
// image items
this.$imgItems = this.$list.children('li');
// total number of items
this.itemsCount = this.$imgItems.length;
// images
this.$images = this.$imgItems.find('img:first');
/***** thumbs ****/
// thumbs wrapper
this.$sliderthumbs = this.$el.find('ul.ei-slider-thumbs').hide();
// slider elements
this.$sliderElems = this.$sliderthumbs.children('li');
// sliding div
this.$sliderElem = this.$sliderthumbs.children('li.ei-slider-element');
// thumbs
this.$thumbs = this.$sliderElems.not('.ei-slider-element');
// initialize slideshow
this._init( options );
};
$.Slideshow.defaults = {
// animation types:
// "sides" : new slides will slide in from left / right
// "center": new slides will appear in the center
animation : 'center', // sides || center
// if true the slider will automatically slide, and it will only stop if the user clicks on a thumb
autoplay : false,
// interval for the slideshow
slideshow_interval : 3000,
// speed for the sliding animation
speed : 800,
// easing for the sliding animation
easing : '',
// percentage of speed for the titles animation. Speed will be speed * titlesFactor
titlesFactor : 0.60,
// titles animation speed
titlespeed : 800,
// titles animation easing
titleeasing : '',
};
$.Slideshow.prototype = {
_init : function( options ) {
this.options = $.extend( true, {}, $.Slideshow.defaults, options );
// set the opacity of the title elements and the image items
this.$imgItems.css( 'opacity', 0 );
this.$imgItems.find('div.ei-title > *').css( 'opacity', 0 );
// index of current visible slider
this.current = 0;
var _self = this;
// preload images
// add loading status
this.$loading = $('<div class="ei-slider-loading">Loading</div>').prependTo( _self.$el );
$.when( this._preloadImages() ).done( function() {
// hide loading status
_self.$loading.hide();
// calculate size and position for each image
_self._setImagesSize();
// configure thumbs container
_self._initThumbs();
// show first
_self.$imgItems.eq( _self.current ).css({
'opacity' : 1,
'z-index' : 10
}).show().find('div.ei-title > *').css( 'opacity', 1 );
// if autoplay is true
if( _self.options.autoplay ) {
_self._startSlideshow();
}
// initialize the events
_self._initEvents();
});
},
_preloadImages : function() {
// preloads all the large images
var _self = this,
loaded = 0;
return $.Deferred(
function(dfd) {
_self.$images.each( function( i ) {
$('<img/>').load( function() {
if( ++loaded === _self.itemsCount ) {
dfd.resolve();
}
}).attr( 'src', $(this).attr('src') );
});
}
).promise();
},
_setImagesSize : function() {
// save ei-slider's width
this.elWidth = this.$el.width();
var _self = this;
this.$images.each( function( i ) {
var $img = $(this);
imgDim = _self._getImageDim( $img.attr('src') );
$img.css({
width : imgDim.width,
height : imgDim.height,
marginLeft : imgDim.left,
marginTop : imgDim.top
});
});
},
_getImageDim : function( src ) {
var $img = new Image();
$img.src = src;
var c_w = this.elWidth,
c_h = this.$el.height(),
r_w = c_h / c_w,
i_w = $img.width,
i_h = $img.height,
r_i = i_h / i_w,
new_w, new_h, new_left, new_top;
if( r_w > r_i ) {
new_h = c_h;
new_w = c_h / r_i;
}
else {
new_h = c_w * r_i;
new_w = c_w;
}
return {
width : new_w,
height : new_h,
left : ( c_w - new_w ) / 2,
top : ( c_h - new_h ) / 2
};
},
_initThumbs : function() {
// set the max-width of the slider elements to the one set in the plugin's options
// also, the width of each slider element will be 100% / total number of elements
this.$sliderElems.css({
'width' : 100 / this.itemsCount + '%'
});
// set the max-width of the slider and show it
this.$sliderthumbs.css( 'width', this.options.thumbMaxWidth * this.itemsCount + 'px' ).show();
},
_startSlideshow : function() {
var _self = this;
this.slideshow = setTimeout( function() {
var pos;
( _self.current === _self.itemsCount - 1 ) ? pos = 0 : pos = _self.current + 1;
_self._slideTo( pos );
if( _self.options.autoplay ) {
_self._startSlideshow();
}
}, this.options.slideshow_interval);
},
// shows the clicked thumb's slide
_slideTo : function( pos ) {
// return if clicking the same element or if currently animating
if( pos === this.current || this.isAnimating )
return false;
this.isAnimating = true;
var $currentSlide = this.$imgItems.eq( this.current ),
$nextSlide = this.$imgItems.eq( pos ),
_self = this,
preCSS = {zIndex : 10},
animCSS = {opacity : 1};
// new slide will slide in from left or right side
if( this.options.animation === 'sides' ) {
preCSS.left = ( pos > this.current ) ? -1 * this.elWidth : this.elWidth;
animCSS.left = 0;
}
// titles animation
$nextSlide.find('div.ei-title > h2')
.css( 'margin-right', 50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
.end()
.find('div.ei-title > h3')
.css( 'margin-right', -50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
$.when(
// fade out current titles
$currentSlide.css( 'z-index' , 1 ).find('div.ei-title > *').stop().fadeOut( this.options.speed / 2, function() {
// reset style
$(this).show().css( 'opacity', 0 );
}),
// animate next slide in
$nextSlide.css( preCSS ).stop().animate( animCSS, this.options.speed, this.options.easing ),
// "sliding div" moves to new position
this.$sliderElem.stop().animate({
left : this.$thumbs.eq( pos ).position().left
}, this.options.speed )
).done( function() {
// reset values
$currentSlide.css( 'opacity' , 0 ).find('div.ei-title > *').css( 'opacity', 0 );
_self.current = pos;
_self.isAnimating = false;
});
},
_initEvents : function() {
var _self = this;
// window resize
$(window).on( 'smartresize.eislideshow', function( event ) {
// resize the images
_self._setImagesSize();
// reset position of thumbs sliding div
_self.$sliderElem.css( 'left', _self.$thumbs.eq( _self.current ).position().left );
});
// click the thumbs
this.$thumbs.on( 'click.eislideshow', function( event ) {
if( _self.options.autoplay ) {
clearTimeout( _self.slideshow );
_self.options.autoplay = false;
}
var $thumb = $(this),
idx = $thumb.index() - 1; // exclude sliding div
_self._slideTo( idx );
return false;
});
}
};
var logError = function( message ) {
if ( this.console ) {
console.error( message );
}
};
$.fn.eislideshow = function( options ) {
if ( typeof options === 'string' ) {
var args = Array.prototype.slice.call( arguments, 1 );
this.each(function() {
var instance = $.data( this, 'eislideshow' );
if ( !instance ) {
logError( "cannot call methods on eislideshow prior to initialization; " +
"attempted to call method '" + options + "'" );
return;
}
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
logError( "no such method '" + options + "' for eislideshow instance" );
return;
}
instance[ options ].apply( instance, args );
});
}
else {
this.each(function() {
var instance = $.data( this, 'eislideshow' );
if ( !instance ) {
$.data( this, 'eislideshow', new $.Slideshow( options, this ) );
}
});
}
return this;
};
})( window, jQuery );
How I can edit that to make them responsive ? can you give an example ?
I suggest you use something more simple (only 3 steps) instead of review this code.
Code:
Step 1: Link required files
First and most important, the jQuery library needs to be included (no need to download - link directly from Google). Next, download the package from this site and link the bxSlider CSS file (for the theme) and the bxSlider Javascript file.
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />
Step 2: Create HTML markup
Create a <ul class="bxslider"> element, with a <li> for each slide. Slides can contain images, video, or any other HTML content!
<ul class="bxslider">
<li><img src="/images/pic1.jpg" /></li>
<li><img src="/images/pic2.jpg" /></li>
<li><img src="/images/pic3.jpg" /></li>
<li><img src="/images/pic4.jpg" /></li>
</ul>
Step 3: Call the bxSlider
Call .bxslider() on <ul class="bxslider">. Note that the call must be made inside of a $(document).ready() call, or the plugin will not work!
$(document).ready(function(){
$('.bxslider').bxSlider();
});
I really believe, this will be more helpful and simple.
Credits: http://bxslider.com
Different configurations
$('.bxslider').bxSlider({
mode: 'fade',
captions: true,
pagerCustom: '#bx-pager',
adaptiveHeight: true,
slideWidth: 150
});
Don't forget to read this: http://bxslider.com/options
I have This javascript code for a slider that I downloaded , and can't figure out how to make it auto scrolling !!
I actually downloaded this code from http://tympanus.net/Tutorials/FullscreenSlitSlider/index2.html
It actually don't contain a next button so i can add an interval like the other sliders :(
$(function() {
var Page = (function() {
var $nav = $( '#nav-dots > span' ),
slitslider = $( '#slider' ).slitslider( {
onBeforeChange : function( slide, pos ) {
$nav.removeClass( 'nav-dot-current' );
$nav.eq( pos ).addClass( 'nav-dot-current' );
}
} ),
init = function() {
initEvents();
setInterval(initEvents,1000);
},
initEvents = function() {
$nav.each( function( i ) {
$( this ).on( 'click', function( event ) {
var $dot = $( this );
if( !slitslider.isActive() ) {
$nav.removeClass( 'nav-dot-current' );
$dot.addClass( 'nav-dot-current' );
}
slitslider.jump( i + 1 );
return false;
} );
} );
};
return { init : init };
})();
Page.init();
});
Like it says in the docs (Google is helpful):
slitslider = $( '#slider' ).slitslider({
autoplay : true
});
should do it.
If you don't want to read the whole thing, here's a short list of common config options:
$.Slitslider.defaults = {
// transitions speed
speed : 800,
// if true the item's slices will also animate the opacity value
optOpacity : false,
// amount (%) to translate both slices - adjust as necessary
translateFactor : 230,
// maximum possible angle
maxAngle : 25,
// maximum possible scale
maxScale : 2,
// slideshow on / off
autoplay : false,
// keyboard navigation
keyboard : true,
// time between transitions
interval : 4000,
// callbacks
onBeforeChange : function( slide, idx ) { return false; },
onAfterChange : function( slide, idx ) { return false; }
};
When I click browse server in ckeditor the image browser popup doesnt appear.I am facing problem only in Google Chrome.I am using 18.0.1025.152 m verion of Google Chrome
I have made changes in ckeditor/plugins/popup/plugin.js
try
{
// Chrome 18 is problematic, but it's not really needed here (#8855).
var ua = navigator.userAgent.toLowerCase();
if ( ua.indexOf('chrome/18' ) == -1 )
{
popupWindow.moveTo( left, top );
popupWindow.resizeTo( width, height );
}
popupWindow.focus();
popupWindow.location.href = url;
}
catch ( e )
{
popupWindow = window.open( url, null, options, true );
}
I followed this link enter link description here
But I am unable to resolve the issue.Can anyone help
If you edit the source files you have to repackage them again. It's much simpler to update to CKEditor 3.6.3 and get all the other bug fixes.
I am using opencart 1.5.1.3 ckeditor. I edit the /admin/view/javascript/ckeditor/ckeditor.js and re-align the javascript code with http://jsbeautifier.org/
I have tried with the patch from ckeditor community and little modifications. It works!
http://dev.ckeditor.com/ticket/8855
So if anyone has face the similar issue like me in opencart you can try with below changes.
+++ b/v1.5.1.3/admin/view/javascript/ckeditor/ckeditor.js
## -9190,8 +9190,21 ## For licensing, see LICENSE.html or http://ckeditor.com/license
var s = window.open('', null, p, true);
if (!s) return false;
try {
- s.moveTo(r, q);
- s.resizeTo(n, o);
+ // s.moveTo(r, q);
+ // s.resizeTo(n, o);
+ // Chrome 18 is problematic, but it's not really needed here (#8855).
+ var ua = navigator.userAgent.toLowerCase();
+ var useResize = true;
+ if (ua.indexOf('chrome') > -1) {
+ var chromeVersion = ua.replace(/^.*chrome\/([\d]+).*$/i, '$1')
+ if(chromeVersion >= 18) {
+ useResize = false;
+ }
+ }
+ if (useResize) {
+ s.moveTo( r, q );
+ s.resizeTo( n, o );
+ }
s.focus();
s.location.href = m;
} catch (t) {
I'm using the CKEditor 3.6.2 that comes bundled with primefaces-extensions, so upgrading is not that easy. But executing the following fix against the page also worked. I pasted it in the config file, to be sure that it is fired after the CKEDITOR variable is initialized.
CKEDITOR.editor.prototype['popup'] = function( url, width, height, options ) {
width = width || '80%';
height = height || '70%';
if ( typeof width == 'string' && width.length > 1 && width.substr( width.length - 1, 1 ) == '%' )
width = parseInt( window.screen.width * parseInt( width, 10 ) / 100, 10 );
if ( typeof height == 'string' && height.length > 1 && height.substr( height.length - 1, 1 ) == '%' )
height = parseInt( window.screen.height * parseInt( height, 10 ) / 100, 10 );
if ( width < 640 )
width = 640;
if ( height < 420 )
height = 420;
var top = parseInt( ( window.screen.height - height ) / 2, 10 ),
left = parseInt( ( window.screen.width - width ) / 2, 10 );
options = ( options || 'location=no,menubar=no,toolbar=no,dependent=yes,minimizable=no,modal=yes,alwaysRaised=yes,resizable=yes,scrollbars=yes' ) +
',width=' + width +
',height=' + height +
',top=' + top +
',left=' + left;
var popupWindow = window.open( '', null, options, true );
// Blocked by a popup blocker.
if ( !popupWindow )
return false;
try
{
// Chrome 18 is problematic, but it's not really needed here (#8855).
var ua = navigator.userAgent.toLowerCase();
if ( ua.indexOf( ' chrome/18' ) == -1 )
{
popupWindow.moveTo( left, top );
popupWindow.resizeTo( width, height );
}
popupWindow.focus();
popupWindow.location.href = url;
}
catch ( e )
{
popupWindow = window.open( url, null, options, true );
}
return true;
}
$(document).ready(
function() {
setContentHeight();
makeInstructionsTogglable();
window.onbeforeunload = function() {
if (editor.isDirty()) {
return "Are you sure you want to navigate away? You have unsaved changes."
}
};
}
);
$(window).resize(function() {
setContentHeight();
});
I have stuck some where while modifying THIS slider.
Here Thumbnail & main display Image have one to one relationship i.e by clicking on 1 thumbnail, It shows a single Image & then it slides to the next thumbnail & displays its associated image & so on.
Now, I want to modify this slider in such a way that one thumbnail should be assiciated / linked with multiple Images i.e one thumbnail to many main display images relationship (one –to-many)
i.e by clicking on “Bedroom thumbnail” (As shown in attached image .. SCREENSHOT ) , It should only display & slide 5 (or n) number of Images related to this particular thumbnail, then in the same way if I am clicking on “Bathroom thumbnail” , It should display & slide 5 (or n) number of images related to this particular section & so on. So this is how I wanna modify the code from ONE-to-ONE [one thumbnail-to-one main display image] to ONE-to-MANY [one thumbnail-to- 5 or n number of images related to that particular thumbnail]
My Modified Thumbnail Section’s HTML code is same.
I have modified the Main Image section as shown ..
<div id="lofslidecontent45" class="lof-slidecontent" style="width:670px;height:236px;">
<div class="preload"><div></div></div>
<div class="lof-main-outer" style="width:670px; height:236px;">
<ul class="lof-main-wapper">
<li>
<ul class=”lof-main-subwapper”>
<li>
<img src="images/slider1.jpg" title="Newsflash 2" >
<div class="lof-main-item-desc">
<h3>Innovation</h3>
<h2>lorem ipsum is simply dummy text</h2>
</div>
</li>
<li>
..
</li>
</ul>
</li>
<li>
<ul class=”lof-main-subwapper”>
<li>
…
</li>
<li>
…
</li>
</ul>
</li>
</ul>
</div>
</div>
I am modifying the slider’s Script code, so far I have adder another wrappersub class & I am stuck while linking the group of images to one thumbnail i.e linking main image section’s ul with thumbnail’s li...
(function($) {
$.fn.lofJSidernews = function( settings ) {
return this.each(function() {
// get instance of the lofSiderNew.
new $.lofSidernews( this, settings );
});
}
$.lofSidernews = function( obj, settings ){
this.settings = {
direction : '',
mainItemSelector : 'li',
mainInnerItemSelector : 'li',
navInnerSelector : 'ul',
navSelector : 'li' ,
navigatorEvent : 'click',
subWrapperSelector :'.lof-main-subwrapper',
wapperSelector: '.lof-main-wapper',
interval : 4000,
innerinterval :20000,
auto : true, // whether to automatic play the slideshow
maxItemDisplay : 5,
startItem : 0,
navPosition : 'vertical',
navigatorHeight : 100,
navigatorWidth : 310,
duration : 600,
navItemsSelector : '.lof-navigator li',
navOuterSelector : '.lof-navigator-outer' ,
isPreloaded : true,
easing : 'easeInOutQuad'
}
$.extend( this.settings, settings ||{} );
this.nextNo = null;
this.previousNo = null;
this.maxWidth = this.settings.mainWidth || 600;
this.wrapper = $( obj ).find( this.settings.wapperSelector );
this.subSlides = this.wrapper.find( this.settings.mainItemSelector );
this.subwrapper = this.subslides.find(this.settings.subWrapperSelector)
this.slides = this.subwrapper.find(this.settings.mainInnerItemSelector)
if( !this.wrapper.length || !this.subslides.length ) return ;
if( !this.subwrapper.length || !this.slides.length ) return ;
if( this.settings.maxItemDisplay > this.slides.length ){
this.settings.maxItemDisplay = this.slides.length;
}
this.currentNo = isNaN(this.settings.startItem)
)||this.settings.startItem > this.slides.length?0:this.settings.startItem;
this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector );
this.navigatorItems = $( obj ).find( this.settings.navItemsSelector );
this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );
if( this.settings.navPosition == 'horizontal' ){
this.navigatorInner.width( this.slides.length * this.settings.navigatorWidth );
this.navigatorOuter.width( this.settings.maxItemDisplay * this.settings.navigatorWidth );
this.navigatorOuter.height( this.settings.navigatorHeight );
} else {
this.navigatorInner.height( this.slides.length * this.settings.navigatorHeight );
this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );
this.navigatorOuter.width( this.settings.navigatorWidth );
}
this.navigratorStep = this.__getPositionMode( this.settings.navPosition );
this.directionMode = this.__getDirectionMode();
if( this.settings.direction == 'opacity') {
this.subwrapper.addClass( 'lof-opacity' );
$(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);
} else {
this.subwrapper.css
({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );
}
if( this.settings.isPreloaded ) {
this.preLoadImage( this.onComplete );
} else {
this.onComplete();
}
}
$.lofSidernews.fn = $.lofSidernews.prototype;
$.lofSidernews.fn.extend = $.lofSidernews.extend = $.extend;
$.lofSidernews.fn.extend({
startUp:function( obj, subwrapper ) {
seft = this;
this.navigatorItems.each( function(index, item ){
$(item).click( function(){
seft.jumping( index, true );
seft.setNavActive( index, item );
} );
$(item).css( {'height': seft.settings.navigatorHeight, 'width': seft.settings.navigatorWidth} );
})
this.registerWheelHandler( this.navigatorOuter, this );
this.setNavActive(this.currentNo );
if( this.settings.buttons && typeof (this.settings.buttons) == "object" ){
this.registerButtonsControl( 'click', this.settings.buttons, this );
}
if( this.settings.auto )
this.play( this.settings.innerinterval,'next', true );
return this;
},
onComplete:function(){
setTimeout( function(){ $('.preload').fadeOut( 900 ); }, 400 ); this.startUp( );
},
preLoadImage:function( callback ){
var self = this;
var images = this.subwrapper.find( 'img' );
var count = 0;
images.each( function(index,image){
if( !image.complete ){
image.onload =function(){
count++;
if( count >= images.length ){
self.onComplete();
}
}
image.onerror =function(){
count++;
if( count >= images.length ){
self.onComplete();
}
}
}else {
count++;
if( count >= images.length ){
self.onComplete();
}
}
} );
},
navivationAnimate:function( currentIndex ) {
if (currentIndex <= this.settings.startItem
|| currentIndex - this.settings.startItem >= this.settings.maxItemDisplay-1) {
this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;
if (this.settings.startItem < 0) this.settings.startItem = 0;
if (this.settings.startItem >this.slides.length-this.settings.maxItemDisplay) {
this.settings.startItem = this.slides.length-this.settings.maxItemDisplay;
}
}
Any HELP would be appreciated.
Thank you
Maybe you could try adding a slide show inside of another slider that will support more content like the Anything Slider. I've used it on projects and had some luck with adding my own custom stuff in the slides.
try adding "var" to line 238, it becomes: var seft = this;