I am new to javascript I have a doubt in changing onclick event to mouseover please help
<script>
$(document).ready(function() {
(function ($) {
$.fn.readmore = function (settings) {
var opts = $.extend({}, $.fn.readmore.defaults, settings);
this.each(function () {
$(this).data("opts", opts);
if ($(this).html().length > opts.substr_len) {
abridge($(this));
linkage($(this));
}
});
function linkage(elem) {
elem.append(elem.data("opts").more_link);
elem.children(".more").click( function () {
$(this).hide();
$(this).siblings("span:not(.hidden)").hide().siblings("span.hidden").animate({'opacity' : 'toggle'},1000);
});
}
function abridge(elem) {
var opts = elem.data("opts");
var txt = elem.html();
var len = opts.substr_len;
var dots = "<span>" + opts.ellipses + "</span>";
var charAtLen = txt.substr(len, 1);
while (len < txt.length && !/\s/.test(charAtLen)) {
len++;
charAtLen = txt.substr(len, 1);
}
var shown = txt.substring(0, len) + dots;
var hidden = '<span class="hidden" style="display:none;">' + txt.substring(len, txt.length) + '</span>';
elem.html(shown + hidden);
}
return this;
};
$.fn.readmore.defaults = {
substr_len: 500,
ellipses: '…',
more_link: '<a class="more">Read More</a>'
};
})(jQuery);
$(function(){
$('.des_details').readmore({ substr_len: 150 });
});
});
</script>
Any suggestions?
There's a bit of API doc about .hover() which explains what I think you're trying to do. Hope this helps.
http://api.jquery.com/hover/
where you have
elem.children(".more").click( function ()
replace it with
elem.children(".more").hover( function ()
Try this code
$(urid).trigger('mouseover');
Related
I am using this code
http://jsfiddle.net/sagive/cAsB3/
my question is how to pause the slider when mouse is on the pictures(hover).
$.getJSON('assets/json/slides.json', function(data) {
$("h2").html(data[0].title);
$.each(data, function (i, f) {
if(i>0){
$("#exampleSlider").append("<li><img src=" + f.content + "/></li>");
}
});
});
$(function () {
/* SET PARAMETERS */
var change_img_time = 3000;
var transition_speed =200;
var simple_slideshow = $("#exampleSlider"),
listItems = simple_slideshow.children('li'),
listLen = listItems.length,
i = 0,
changeList = function () {
listItems.eq(i).fadeOut(transition_speed, function () {
i += 1;
if (i === listLen) {
i = 0;
}
listItems.eq(i).fadeIn(transition_speed);
});
};
listItems.not(':first').hide();
setInterval(changeList, change_img_time);
});
and I have another question also: when I import pic with get JSON. the directory in browser is like this:
assets/img/pic1.jpg/
how can I remove the / at the end of directory. because with / in is not shows the pic in browsers
thanks
Try:
if($('#exampleSlider').is(":hover") == true){
return false;
}
I am trying to implement a fancy slider from codepen in wordpress. I have correctly added the script using the enqueue script method. I know I did it coorectly because it worked for a very small experiment I tried. Now the pen is: http://codepen.io/suez/pen/wMMgXp .
(function() {
var $$ = function(selector, context) {
var context = context || document;
var elements = context.querySelectorAll(selector);
return [].slice.call(elements);
};
function _fncSliderInit($slider, options) {
var prefix = ".fnc-";
var $slider = $slider;
var $slidesCont = $slider.querySelector(prefix + "slider__slides");
var $slides = $$(prefix + "slide", $slider);
var $controls = $$(prefix + "nav__control", $slider);
var $controlsBgs = $$(prefix + "nav__bg", $slider);
var $progressAS = $$(prefix + "nav__control-progress", $slider);
var numOfSlides = $slides.length;
var curSlide = 1;
var sliding = false;
var slidingAT = +parseFloat(getComputedStyle($slidesCont)["transition-duration"]) * 1000;
var slidingDelay = +parseFloat(getComputedStyle($slidesCont)["transition-delay"]) * 1000;
var autoSlidingActive = false;
var autoSlidingTO;
var autoSlidingDelay = 5000; // default autosliding delay value
var autoSlidingBlocked = false;
var $activeSlide;
var $activeControlsBg;
var $prevControl;
function setIDs() {
$slides.forEach(function($slide, index) {
$slide.classList.add("fnc-slide-" + (index + 1));
});
$controls.forEach(function($control, index) {
$control.setAttribute("data-slide", index + 1);
$control.classList.add("fnc-nav__control-" + (index + 1));
});
$controlsBgs.forEach(function($bg, index) {
$bg.classList.add("fnc-nav__bg-" + (index + 1));
});
};
setIDs();
function afterSlidingHandler() {
$slider.querySelector(".m--previous-slide").classList.remove("m--active-slide", "m--previous-slide");
$slider.querySelector(".m--previous-nav-bg").classList.remove("m--active-nav-bg", "m--previous-nav-bg");
$activeSlide.classList.remove("m--before-sliding");
$activeControlsBg.classList.remove("m--nav-bg-before");
$prevControl.classList.remove("m--prev-control");
$prevControl.classList.add("m--reset-progress");
var triggerLayout = $prevControl.offsetTop;
$prevControl.classList.remove("m--reset-progress");
sliding = false;
var layoutTrigger = $slider.offsetTop;
if (autoSlidingActive && !autoSlidingBlocked) {
setAutoslidingTO();
}
};
function performSliding(slideID) {
if (sliding) return;
sliding = true;
window.clearTimeout(autoSlidingTO);
curSlide = slideID;
$prevControl = $slider.querySelector(".m--active-control");
$prevControl.classList.remove("m--active-control");
$prevControl.classList.add("m--prev-control");
$slider.querySelector(prefix + "nav__control-" + slideID).classList.add("m--active-control");
$activeSlide = $slider.querySelector(prefix + "slide-" + slideID);
$activeControlsBg = $slider.querySelector(prefix + "nav__bg-" + slideID);
$slider.querySelector(".m--active-slide").classList.add("m--previous-slide");
$slider.querySelector(".m--active-nav-bg").classList.add("m--previous-nav-bg");
$activeSlide.classList.add("m--before-sliding");
$activeControlsBg.classList.add("m--nav-bg-before");
var layoutTrigger = $activeSlide.offsetTop;
$activeSlide.classList.add("m--active-slide");
$activeControlsBg.classList.add("m--active-nav-bg");
setTimeout(afterSlidingHandler, slidingAT + slidingDelay);
};
function controlClickHandler() {
if (sliding) return;
if (this.classList.contains("m--active-control")) return;
if (options.blockASafterClick) {
autoSlidingBlocked = true;
$slider.classList.add("m--autosliding-blocked");
}
var slideID = +this.getAttribute("data-slide");
performSliding(slideID);
};
$controls.forEach(function($control) {
$control.addEventListener("click", controlClickHandler);
});
function setAutoslidingTO() {
window.clearTimeout(autoSlidingTO);
var delay = +options.autoSlidingDelay || autoSlidingDelay;
curSlide++;
if (curSlide > numOfSlides) curSlide = 1;
autoSlidingTO = setTimeout(function() {
performSliding(curSlide);
}, delay);
};
if (options.autoSliding || +options.autoSlidingDelay > 0) {
if (options.autoSliding === false) return;
autoSlidingActive = true;
setAutoslidingTO();
$slider.classList.add("m--with-autosliding");
var triggerLayout = $slider.offsetTop;
var delay = +options.autoSlidingDelay || autoSlidingDelay;
delay += slidingDelay + slidingAT;
$progressAS.forEach(function($progress) {
$progress.style.transition = "transform " + (delay / 1000) + "s";
});
}
$slider.querySelector(".fnc-nav__control:first-child").classList.add("m--active-control");
};
var fncSlider = function(sliderSelector, options) {
var $sliders = $$(sliderSelector);
$sliders.forEach(function($slider) {
_fncSliderInit($slider, options);
});
};
window.fncSlider = fncSlider;
}());
/* not part of the slider scripts */
/* Slider initialization
options:
autoSliding - boolean
autoSlidingDelay - delay in ms. If audoSliding is on and no value provided, default value is 5000
blockASafterClick - boolean. If user clicked any sliding control, autosliding won't start again
*/
fncSlider(".example-slider", {autoSlidingDelay: 4000});
var $demoCont = document.querySelector(".demo-cont");
[].slice.call(document.querySelectorAll(".fnc-slide__action-btn")).forEach(function($btn) {
$btn.addEventListener("click", function() {
$demoCont.classList.toggle("credits-active");
});
});
document.querySelector(".demo-cont__credits-close").addEventListener("click", function() {
$demoCont.classList.remove("credits-active");
});
document.querySelector(".js-activate-global-blending").addEventListener("click", function() {
document.querySelector(".example-slider").classList.toggle("m--global-blending-active");
});
The javascript code can e found above and in the mentioned link.I know that in wordpress we have to use jQuery in place of $ but I still can't seem to figure out how to do it in this case. And one more thing, the css is in scass form but I have taken the compiled css form but I don't think that is causing any problem (rignt?) Everything I have tried till this point has failed. Any help will be appreciated
You can use $ instead of jQuery in WordPress so long as you wrap all your code inside the following:
(function($) {
// Your code goes here
})( jQuery );
If the code is in the header (before the document is ready) then instead use:
jQuery(document).ready(function( $ ) {
// Your code goes here
});
If your code is still having problems, then please include both the enqueue code in your theme and the error messages
https://jsfiddle.net/51Le6o06/48/
please take a look at the jsfiddle the code is getting to complicated and my functions aren't working correctly.
can anyone tell me what I could use instead of standard jQuery and javascript to make this easier to build (with a show more style pagination method).
I need to sort, filter and page existing html as in the jsfiddle.
thanks.
$(document).ready(function() {
$('.filter-gift').each(filterItems);
});
function filterItems(e) {
var items = [];
var table = '';
tableId = $(this).parent().parent().attr('tag')
var listItems = "";
listItems += "<option value=''> -Select- </option>";
$('div[tag="' + tableId + '"] table.internalActivities .information').each(function (i) {
var itm = $(this)[0].innerText;
if ($.inArray(itm, items) == -1) {
items.push($(this)[0].innerText);
listItems += "<option value='" + i + "'>" + $(this)[0].innerText + "</option>";
}
});
$('div[tag="' + tableId+ '"] .filter-gift').html(listItems);
$('.filter-gift').change(function () {
if($(this).val()!= "") {
var tableIdC = $(this).parent().parent().attr('tag');
var text = $('div[tag="' + tableIdC + '"] select option:selected')[0].text.replace(/(\r\n|\n|\r| |)/gm, "");;
$('div[tag="' + tableIdC + '"] .product-information-row').each(function (i) {
if ($(this).text().replace(/(\r\n|\n|\r| |)/gm, "") == text) {
$(this).show();
$(this).prev().show();
$(this).next().show();
}
else {
$(this).hide();
$(this).prev().hide();
$(this).next().hide();
}
});
} else {
$(this).parent().parent().find('table tr').show();
}
});
}
jQuery.fn.sortPaging = function(options) {
var defaults = {
pageRows: 2
};
var settings = $.extend(true, defaults, options);
return this.each(function() {
var container = $(this);
var tableBody = container.find('.internalActivities > tbody');
var dataRows = [];
var currentPage = 1;
var maxPages = 1;
var buttonMore = container.find('.seeMoreRecords');
var buttonLess = container.find('.seeLessRecords');
var buttonFree = container.find('.filter-free');
var tableRows = [];
var maxFree = 0;
var filterFree = buttonFree.is(':checked');
function displayRows() {
tableBody.empty();
var displayed = 0;
$.each(dataRows, function(i, ele) {
if( !filterFree || (filterFree && ele.isFree) ) {
tableBody.append(ele.thisRow).append(ele.nextRow);
displayed++;
if( displayed >= currentPage*settings.pageRows ) {
return false;
};
};
});
};
function checkButtons() {
buttonLess.toggleClass('element_invisible', currentPage<=1);
buttonMore.toggleClass('element_invisible', filterFree ? currentPage>=maxFreePages : currentPage>=maxPages);
};
function showMore() {
currentPage++;
displayRows();
checkButtons();
};
function showLess() {
currentPage--;
displayRows();
checkButtons();
};
function changedFree() {
filterFree = buttonFree.is(':checked');
if( filterFree && currentPage>maxFreePages ) {
currentPage=maxFreePages;
};
displayRows();
checkButtons();
};
tableBody.find('.product-data-row').each(function(i, j) {
var thisRow = $(this);
var nextRow = thisRow.next();
var amount = parseFloat(thisRow.find('.amount').text().replace(/£/, ''));
var isFree = thisRow.find('.free').length;
maxFree += isFree;
dataRows.push({
amount: amount,
thisRow: thisRow,
nextRow: nextRow,
isFree: isFree
});
})
dataRows.sort(function(a, b) {
return a.amount - b.amount;
});
maxPages = Math.ceil(dataRows.length/settings.pageRows);
maxFreePages = Math.ceil(maxFree/settings.pageRows);
tableRows = tableBody.find("tr");
buttonMore.on('click', showMore);
buttonLess.on('click', showLess);
buttonFree.on('change', changedFree);
displayRows();
checkButtons();
})
};
$('.sort_paging').sortPaging();
The best solution when it comes to tables with all the filter, sorting, pagination features and much more is one and only.
jQuery Datatables
Just check out the link, It's Easy and Highly Customizable.
Maybe you could use this jquery plug-in DataTables
I'm trying to position this button for my quickview in the bottom right corner of the image instead of centered, but I can't figure out how to do it. The code is using top and left offsets to position the button in the center. How can I position it in the bottom right corner instead? To see an example of the positioning I'm hoping to achieve, go to: http://www.shrimptoncouture.com/collections/all-clothing.
Here's what I'm working with. Any help would be greatly appreciated:
Cmsmart.noConflict();
Cmsmart(function($) {
var producturl;
function geturlrewrite(){
var mypath = arguments[0];
var patt = /\/[^\/]{0,}$/ig;
if(mypath){
if(mypath[mypath.length-1]=="/"){
mypath = mypath.substring(0,mypath.length-1);
return (mypath.match(patt)+"/");
}
return mypath.match(patt);
}
return '';
}
function urltrim(){
return arguments[0].replace(/^\s+|\s+$/g,"");
}
function installquickview(){
if (typeof CMSMART == 'undefined') return;
var argInput = arguments[0];
var productlistBlocks = $(argInput.productlistClassArr);
var datasaved = [];
var mypath = 'cmsmquickview/index/index';
if(CMSMART.QuickView.BASE_URL.indexOf('index.php') == -1){
mypath = 'cmsmquickview/index/index';
}else{
mypath = 'cmsmquickview/index/index';
}
var baseUrl = CMSMART.QuickView.BASE_URL + mypath;
var _quickviewbutton = '<a id="cmsmart_quickview_button" href="#">' + CMSMART.QuickView.BOTTON_LABEL + '</a>';
var _quickform = '<div id="csmm_quickform">' +
'<div id = "quickviewshow" ></div>' +
'</div>';
$(document.body).append(_quickform);
$(document.body).append(_quickviewbutton);
var quickviewButton = $('#cmsmart_quickview_button');
//alert(encodeURIComponent(CMSMART.QuickView.BASE_URL + 'ab=3dfd&ddfdfd=234'));
$.each(productlistBlocks, function(i, vl){
var productlist = $(vl);
$.each(productlist, function(index, value) {
var reloadurl = '';
var aClass = argInput.aClass[i]?argInput.aClass[i]:argInput.aClass[0];
producturl = $(aClass, value);
if(producturl.attr('href')){
var producturlpath = producturl.attr('href').replace(CMSMART.QuickView.BASE_URL,"");
//var producturlpath = geturlrewrite(producturl.attr('href'))[0];
//producturlpath[0] == "\/" ? producturlpath = producturlpath.substring(1,producturlpath.length) : producturlpath;
//producturlpath = urltrim(producturlpath);
reloadurl += baseUrl+ ("/path/"+producturlpath).replace(/\/\//g,"/");
//alert(reloadurl);
var imgClass = argInput.imgClass[i]?argInput.imgClass[i]:argInput.imgClass[0];
$(this).bind('mouseover', function() {
//var o = $(this).offset();
//var o = $(this);
var o = $(imgClass+':eq(0)', this);
$('#cmsmart_quickview_button').attr('href',reloadurl).show()
.css({
'top': o.offset().top+(o.height() - quickviewButton.height())/2+'px',
'left': o.offset().left+(o.width() - quickviewButton.outerWidth())/2+'px',
'visibility': 'visible'
});
});
$(value).bind('mouseout', function() {
$('#cmsmart_quickview_button').hide();
});
}
});
});
if(CMSMART.QuickView.CENTER)
{
$("#quickviewshow").css('margin', ($(window).height() / 2 - $("#quickviewshow").height() / 2) + "px auto auto auto");
}
$('#cmsmart_quickview_button')
.bind('mouseover', function() {
$(this).show();
})
.bind('click', function() {
idbyurl = ($(this).attr('href')).replace(/\W/g,"");
showqv();
$("#quickviewshow").html('<a id="cmsmart_quickview_button_close" title="Close Quick View"> </a><a class="quickviewloading"><a>');
$("#cmsmart_quickview_button_close").on( "click", function() {
closeqv();
$("div.zoomContainer").remove();
});
$(this).hide();
if(datasaved[idbyurl]){
$("#quickviewshow").html('<a id="cmsmart_quickview_button_close" title="Close Quick View"> </a>');
$("#cmsmart_quickview_button_close").on( "click", function() {
closeqv();
});
$("#quickviewshow").append(datasaved[idbyurl]);
showqv();
relimg();
return false;
}
else{
$.ajax({
url: $(this).attr('href'),
cache: false
}).done(function( html ) {
$("#quickviewshow").html('<a id="cmsmart_quickview_button_close" title="Close Quick View"> </a>');
$("#cmsmart_quickview_button_close").on( "click", function() {
closeqv();
$("div.zoomContainer").remove();
});
$("#quickviewshow").append(html);
showqv();
datasaved[idbyurl] = html;
relimg();
});
}
return false;
});
$('#csmm_quickform').click(function(e) {
if($(e.target).is('#quickviewshow, #quickviewshow *')) return;
$('#csmm_quickform').hide();
$("div.zoomContainer").remove();
});
}
$( document ).ready(function() {
installquickview(CMSMART.QuickView.BUTTON_CONFIG);
});
$(window).resize(function() {
$("#quickviewshow").css('margin', ($(window).height() / 2 - $("#quickviewshow").height() / 2) + "px auto auto auto");
});
function relimg(){
maxh = $('div.product-quickview').outerHeight() - 45;
if($('div.qvtabhead')) maxh = maxh - $('div.qvtabhead').outerHeight();
if($('div.qvformaddtocart')) maxh = maxh - $('div.qvformaddtocart').outerHeight();
if($('div.tabquickshow')) $('div.tabquickshow').css('max-height', maxh + "px");
//submitbqv();
$('#showlargeimg').elevateZoom({ zoomWindowWidth:300, zoomWindowHeight:300, borderSize: 2, zoomWindowOffetx:15, cursor:'move' });
$('#mycarousel').jcarousel({
scroll: 4
});
$("li img.p_image_hover").click(
function () {
smallImage = $(this).attr('src');
largeImage = $(this).attr('data-zoom-image');
$('img#showlargeimg').attr('src', smallImage);
var ez = $('#showlargeimg').data('elevateZoom');
ez.swaptheimage(smallImage, largeImage);
}
);
$('a.tabquickviewcontrol').click(
function(){
$('a.tabquickviewcontrol').removeClass("highlight");
$(this).addClass("highlight");
var divsl = $(this).attr('href');
$('.tabquickshow').css('display', 'none');
$(divsl).css('display', 'block');
return false;
}
)
}
function showqv(){ $("#csmm_quickform").css("display", "block"); }
function closeqv(){ $("#csmm_quickform").css("display", "none"); }
function btcloseqv(){
$("#cmsmart_quickview_button_close").on( "click", function() {
$("#csmm_quickform").css("display", "none");
});
}
function submitbqv(){
var fr = $('#product_addtocart_form');
var btc = $('.btn-cart', fr);
btc.attr('onclick', '');
btc.click(function(){
var cansubmit = true;
$('select.required-entry', fr).each(function(){
if($(this).val() == ''){
$(this).addClass('validation-failed');
$(this).focus();
cansubmit = false;
return false;
}else { $(this).removeClass('validation-failed'); }
});
if(cansubmit) fr.submit();
});
}
btcloseqv();
});
It might be something like:
$('#cmsmart_quickview_button').attr('href',reloadurl).show()
.css({
'top' : o.offset().top + o.height() - quickviewButton.height()+'px',
'left': o.offset().left+ o.width() - quickviewButton.outerWidth()+'px',
'visibility': 'visible'
});
If that isn't it, keep playing with that code until you get what you want. You might try o.offset().bottom and o.offset().right but I don't know if they are defined.
I have this jQuery-script that gives any image or object with tag data-retina="true" a retina-resolution-image or background-image.
But how do I remove the last part from the script so that this function will apply on every image, not just the one with the data-retina tag?
(function($) {
"use strict";
var retinaReplace = function(element, options) {
this.options = options;
var $el = $(element);
var is_image = $el.is('img');
var normal_url = is_image ? $el.attr('src') : $el.backgroundImageUrl();
var retina_url = this.options.generateUrl($el, normal_url);
$('<img/>').attr('src', retina_url).load(function() {
if (is_image) {
$el.attr('src', $(this).attr('src'));
} else {
$el.backgroundImageUrl($(this).attr('src'));
$el.backgroundSize($(this)[0].width, $(this)[0].height);
}
$el.attr('data-retina', 'complete');
});
}
retinaReplace.prototype = {
constructor: retinaReplace
}
$.fn.retinaReplace = function(option) {
if (getDevicePixelRatio() <= 1) { return this; }
return this.each(function() {
var $this = $(this);
var data = $this.data('retinaReplace');
var options = $.extend({}, $.fn.retinaReplace.defaults, $this.data(), typeof option == 'object' && option);
if (!data) { $this.data('retinaReplace', (data = new retinaReplace(this, options))); }
if (typeof option == 'string') { data[option](); }
});
}
$.fn.retinaReplace.defaults = {
suffix: '-x2',
generateUrl: function(element, url) {
var dot_index = url.lastIndexOf('.');
var extension = url.substr(dot_index + 1);
var file = url.substr(0, dot_index);
return file + this.suffix + '.' + extension;
}
}
$.fn.retinaReplace.Constructor = retinaReplace;
var getDevicePixelRatio = function() {
if (window.devicePixelRatio === undefined) { return 1; }
return window.devicePixelRatio;
}
$.fn.backgroundImageUrl = function(url) {
return url ? this.each(function () {
$(this).css("background-image", 'url("' + url + '")')
}) : $(this).css("background-image").replace(/url\(|\)|"|'/g, "");
}
$.fn.backgroundSize = function(retinaWidth, retinaHeight) {
var sizeValue = Math.floor(retinaWidth/2) + 'px ' + Math.floor(retinaHeight/2) + 'px';
$(this).css("background-size", sizeValue);
$(this).css("-webkit-background-size", sizeValue);
}
$(function(){
$("[data-retina='true']").retinaReplace();
});
})(window.jQuery);
how do I remove the last part from the script so that this function will apply on every image, not just the once with the data-retina-tag?
Change:
$(function(){
$("[data-retina='true']").retinaReplace();
});
To:
$(function(){
$("img").retinaReplace();
});