My site is using Google web design code with custom functions.
I need to delete multiple image using the mouse. When the user goes out of the image the first image needs to be delated. When the user enters the document again, he is able to delete the following image.
My problem is that when the user goes out of the document all the images are going to be delayed.
I need to select different image by CSS ID --> WHR. Something's not working. I'm looking for a different solution.
<div class="gwd-page-content gwd-page-size">
<gwd-image id="gwd-image_3" source="assets/SO-91650-Solferino_Tamaro_01.03-30.03_300X250.jpg" scaling="stretch" class="gwd-image-1s8p"></gwd-image>
<gwd-image id="gwd-image_2" source="assets/SO-91650-Solferino_Panebianco_01.03-
<gwd-image id=" gwd-image_1 " source="assets/SO-91650-Solferino_Sinclair_05.03-05.04_300X250.jpg " scaling="stretch " class="gwd-image-on7n "></gwd-image>
<gwd-taparea id="gwd-taparea_image1 " class="gwd-taparea-odyq " data-gwd-name="tap_image1 "></gwd-taparea>
<gwd-taparea id="gwd-taparea_1 " class="gwd-taparea-f0yc " data-gwd-name="first_interaction " data-gwd-tl-hidden=" "></gwd-taparea>
</div>
<script type = "text/javascript" gwd-events="registration">
// Support code for event handling in Google Web Designer
// This script block is auto-generated. Please do not edit!
gwd.actions.events.registerEventHandlers = function(event) {
gwd.actions.events.addHandler('gwd-taparea_image1', 'mousemove', gwd.image2, false);
};
gwd.actions.events.deregisterEventHandlers = function(event) {
gwd.actions.events.removeHandler('gwd-taparea_1', 'mousemove', gwd.auto_Gwd_taparea_1Touchenter, false);
gwd.actions.events.removeHandler('gwd-taparea_image1', 'mousemove', gwd.image2, false);
};
document.addEventListener("DOMContentLoaded", gwd.actions.events.registerEventHandlers);
document.addEventListener("unload", gwd.actions.events.deregisterEventHandlers);
</script>
//var MAX = 3;
var i = 1;
gwd.image2 = function(e) {
var i = 1;
var whr = "#gwd-image_" + i;
var whr2 = "#gwd-image_" + (i + 1);
$(document).mousemove(function(e) {
console.log(whr);
$(whr).css({
left: e.pageX - 150,
top: e.pageY - 125,
}, 10);
$(whr).css("-webkit-transform", "rotate(" + (e.pageX - 150) / 10 + "deg)");
$(document).mouseout(function(e) {
$(whr).animate({
left: (e.pageX - 150) * 3 + 'px'
}, "fast", function() {
gwd.actions.events.setInlineStyle('gwd-image_1', 'display: none;');
i = i + 1;
})
})
})
}
I am trying to dynamically change the order of <tr> I am wanting to do it via translateY in the css but tables do not seem to support this css.
Is there a way I can rearrage the tr order using CSS, I know there is a javascript plugin called datatables but I do not want to implement that in this project, sure it is possible to change the visible order of <tr> only with CSS or javascript? but not plugin?
my current attempt is looking like this:
arrangeAll: function () {
var visible = [];
var invisible = [];
this.collection.each(function (project) {
if (project.get('visible'))
visible.push(project);
else
invisible.push(project);
}, this);
var barheight = $('tbody tr').height();
var totalHeight = visible.length * barheight;
$(visible).each(function (i, elt) {
// find the matching project line
var Ypos = i * barheight;
var $bar = $('tr[data-id="' + elt.id + '"]');
$bar.css({
'top': Ypos + 'px',
'opaticy': 1,
'display': 'block',
'position': 'absolute'
});
});
$(invisible).each(function (i, elt) {
// find the matching project line
var $bar = $('.li-project-ontimeline[data-id="' + elt.id + '"]');
$bar.css({
'opaticy': 0
});
});
},
I have a jQuery script that increases or decreases the font-size and line-height of my websites CSS.
I want the increase size to be limited to three clicks, and the decrease size to only function once the increase size link has been clicked. So that the default size cannot be reduced, therefor making the lowest decrease size, the default size.
If the user changes the font-size, and navigates to another page within the site, I'd like the "new size" to be displayed. i.e. the font-size doesn't revert to the default size.
The following script only increases and decreases the font-size and line-height:
(function ($) {
$.fn.fontResize = function (options) {
var settings = {
increaseBtn: $('#incfont'),
decreaseBtn: $('#decfont')
};
options = $.extend(settings, options);
return this.each(function () {
var element = $(this);
options.increaseBtn.on('click', function (e) {
e.preventDefault();
var baseFontSize = parseInt(element.css('font-size'));
var baseLineHeight = parseInt(element.css('line-height'));
element.css('font-size', (baseFontSize + 2) + 'px');
element.css('line-height', (baseLineHeight + 2) + 'px');
});
options.decreaseBtn.on('click', function (e) {
e.preventDefault();
var baseFontSize = parseInt(element.css('font-size'));
var baseLineHeight = parseInt(element.css('line-height'));
element.css('font-size', (baseFontSize - 2) + 'px');
element.css('line-height', (baseLineHeight - 2) + 'px');
});
});
};
})(jQuery);
$(function () {
$('body,h1,h2,h3,h4,h5,h6,p,ul,ol,a,input').fontResize();
});
I've created a jsfiddle for this: http://jsfiddle.net/Lv2x4/
You can use a variable to keep track of where you are in the font size increasing and decreasing. Here's a revised version of your fiddle, and code:
(function ($) {
$.fn.fontResize = function(options){
var increaseCount = 0;
var self = this;
var changeFont = function(element, amount){
var baseFontSize = parseInt(element.css('font-size'), 10);
var baseLineHeight = parseInt(element.css('line-height'), 10);
element.css('font-size', (baseFontSize + amount) + 'px');
element.css('line-height', (baseLineHeight + amount) + 'px');
};
options.increaseBtn.on('click', function (e) {
e.preventDefault();
if(increaseCount === 3){ return; }
self.each(function(index, element){
changeFont($(element), 2);
});
increaseCount++;
});
options.decreaseBtn.on('click', function (e) {
e.preventDefault();
if(increaseCount === 0){ return; }
self.each(function(index, element){
changeFont($(element), -2);
});
increaseCount--;
});
}
})(jQuery);
$(function () {
$('body,h1,h2,h3,h4,h5,h6,p,ul,ol,a,input').fontResize({
increaseBtn: $('#incfont'),
decreaseBtn: $('#decfont')
});
});
http://jsfiddle.net/Lv2x4/7/
I also made fontResize pass the buttons in during invocation, which makes more sense if you're trying to design this as a jQuery component. Also, since the logic to change font size is repeating code, I separated that into its own function, so you don't repeat yourself.
EDIT: whoops, skimped over the part that you wanted persistence as well! That's easy enough through localStorage. Clicky here.
http://jsfiddle.net/Lv2x4/9/
Without a backend to store the user's settings, you would need to use a cookie, sessionStorage or localStorage to save the setting on the browser.
Here's a pretty decent jquery plugin for CRUD-ing cookies.
Demo
JavaSript Code I changed:
return this.each(function () {
var element = $(this),
clicks = 0; // add a clicks counter
options.increaseBtn.on('click', function (e) {
e.preventDefault();
if (clicks < 3) { // make sure limit is not exceeded
var baseFontSize = parseInt(element.css('font-size'));
var baseLineHeight = parseInt(element.css('line-height'));
element.css('font-size', (baseFontSize + 2) + 'px');
element.css('line-height', (baseLineHeight + 2) + 'px');
clicks += 1; // increase by 1
}
});
options.decreaseBtn.on('click', function (e) {
e.preventDefault();
if (clicks > 0) { // make sure there are clicks left
var baseFontSize = parseInt(element.css('font-size'));
var baseLineHeight = parseInt(element.css('line-height'));
element.css('font-size', (baseFontSize - 2) + 'px');
element.css('line-height', (baseLineHeight - 2) + 'px');
clicks -= 1; // decrease number of clicks left
}
});
This would work. But for the storage of user settings, you will have to use localstorage, sessionStorage, or cookies.
use two variables
var incr=0;
var decr=0;
and if condition to limit your font size increment to Three clicks and also consider one thing that when you click on button if other button is clicked then you need to decrease value of other variable so that you always get three clicks to increment/decrement font size.(jsfiddle link WORKING....)
options.increaseBtn.on('click', function (e) {
e.preventDefault();
var baseFontSize = parseInt(element.css('font-size'));
var baseLineHeight = parseInt(element.css('line-height'));
if(incr<3){
element.css('font-size', (baseFontSize + 2) + 'px');
element.css('line-height', (baseLineHeight + 2) + 'px');
incr++;
if(decr>0)
{decr--; }
}
});
options.decreaseBtn.on('click', function (e) {
e.preventDefault();
var baseFontSize = parseInt(element.css('font-size'));
var baseLineHeight = parseInt(element.css('line-height'));
if(decr<3){
element.css('font-size', (baseFontSize - 2) + 'px');
element.css('line-height', (baseLineHeight - 2) + 'px');
decr++;
if(incr>0)
{incr--; }
}
});
I am trying to modify a slideshow to continuously animate while the mouse is over the back or next arrow. If the mouse leaves, I would like the animation to stop where it is.
I found this post and this post which are helpful in telling me I need to use setInterval, but because I am a beginner I am not sure how to implement it with the code I have. I tried updating the miliseconds set in the counter variable but that didn't change anything.
Here is the hover code so far. It advances the image on hover but not continuously.
$(document).ready(function(){
var thumbs = $('ul.thumbHolder li');
var bigImgs = $('ul.imgHolder li');
var mask = $('.imgHolder');
var imgW = $('ul.imgHolder li').width();
var speed = 800;
thumbs.removeClass('selected').first().addClass('selected');
thumbs.click(function () {
var target = $(this).index();
mask.animate({
'left': '-' + imgW * target + 'px'
}, speed);
thumbs.removeClass('selected');
$(this).addClass('selected');
});
$('.Bleft').on('mouseover', function () {
var i = $('ul.thumbHolder li.selected').index();
i--;
$('ul.thumbHolder li.selected').removeClass('selected');
thumbs.eq(i).addClass('selected');
if (i === -1) {
mask.animate({
'left': '-' + imgW * $('ul.thumbHolder li').index() + 'px'
}, speed);
} else {
mask.animate({
'left': '-' + imgW * i + 'px'
}, speed);
}
clearInterval(counter);
});
$('.Bright').on('mouseover', function () {
var i = $('ul.thumbHolder li.selected').index();
i = i >= thumbs.length - 1 ? 0 : i + 1;
$('ul.thumbHolder li.selected').removeClass('selected');
thumbs.eq(i).addClass('selected');
mask.animate({
'left': '-' + imgW * i + 'px'
}, speed);
clearInterval(counter);
});
var count = 0;
var counter = window.setInterval(timer, 5000);
function timer() {
count = count + 0;
if (count >= 0) {
count = 0;
return;
}
mask.animate({
'left': '-' + imgW * count + 'px'
}, speed);
thumbs.removeClass('selected');
thumbs.eq(count).addClass('selected');
}
});
This is an example of what I am trying to achieve (I know it is flash but I think it can be done with jQuery too).
This is a fiddle that has all my work so far.
Thank you for any help.
I think I am close to the solution. This is my idea.
Every ul.imgHolder li is divided in many blocks of 20px ( you can change the size of course ), so if a div has a size of 980px you will have 49 blocks for image.
When mouseover event is fired I will slide for a block every speed milliseconds until the mouseout is fired.
I've implemented only the slide right button, I've deleted partially some logic, sorry!
var $ = jQuery.noConflict(true);
$(document).ready(function(){
var thumbs = $('ul.thumbHolder li');
var bigImgs = $('ul.imgHolder li');
var mask = $('.imgHolder');
var imgW = $('ul.imgHolder li').width(); //Assuming imgW % 20 = 0
var blockSize = 20; //20px
var blocksPerThumb = imgW/blockSize;
var numBlocks = (blocksPerThumb)*thumbs.length;
var speed = 400;
var blockPos = 0;
var currentAnim = null;
thumbs.removeClass('selected').first().addClass('selected');
thumbs.click(function () {
var target = $(this).index();
mask.animate({
'left': '-' + imgW * target + 'px'
}, speed,'linear');
thumbs.removeClass('selected');
$(this).addClass('selected');
});
$('.Bleft').on('mouseover', function () {
});
$('.Bright').on('mouseover', function(){
currentAnim = setInterval(goRight,speed);
}).mouseout(function(){
clearInterval(currentAnim);
});
var goRight = function () {
blockPos = (blockPos+1)%numBlocks;
mask.animate({
'left': '-' + blockSize * blockPos + 'px'
}, speed,'linear');
};
});
Good Work!
For an element defined as display:none in css I am trying to run a function which tries to display the element using .show(), code below:
CSS
.element {
position: absolute;
display: none;
left: 0;
top: 0;
}
HTML
<div class="element">Some content here</div>
<div class="element">Some content here</div>
jQuery
var c = $('.element');
c.each(function () {
c.css({
'left': dleft + 'px'
});
c.css({
'top': dtop + 'px'
});
c.setTimeout(function () {
c.show(1000);
}, sduration);
All the variables are getting populated I have checked by alerting all of them and given them default values as well, but somehow the element is not being shown after the timeout.
There seems to be two problems in the code you have written. you have not closed the .each() loop .. Also setTimeout is a global function.. .. Check this
var dleft = 40;
var dtop = 40;
var sduration = 1000;
var c = $('.element');
c.each(function() {
c.css({
'left': dleft + 'px',
'top': dtop + 'px'
});
});
setTimeout(function() {
c.show(1000);
}, sduration);
Check this FIDDLE
setTimeout is a global function.
var c = $('.element');
c.each(function () {
c.css({ 'left': dleft + 'px', 'top': dtop + 'px' });
setTimeout(function () {
c.show(1000);
}, sduration);
});
Demo: http://jsfiddle.net/S7nw3/
If you need to delay when the elements are being shown, you can also make use of the jQuery .delay() function.
c.each(function() {
c.css({
'left': dleft + 'px',
'top': dtop + 'px'
});
});
c.delay(1000).show();