Basic Slideshow - javascript

I am creating a slideshow in JavaScript and jQuery to show an array of images.
My idea is to put 3 divs on the page:
One with a left button
one with a right button
one called screen that will display the image.
This is the code I have written, but I don't know what's missing. Maybe an onload event?
var now =0;
var image_array=
[
"../cabinets/001.jpg",
"../cabinets/002.jpg",
"../cabinets/003.jpg"
];
$("#left").click(left( if(now<image_array.length)
{
now++;
$('#screen').css('background-image', 'url("' + array[now] + '")');
}));
$("#right").click( if(now>0)
{
now--;
$('#screen').css('background-image', 'url("' + array[now] + '")');
});

I rewrote your code, here is result:
1) have you included jQuery library into your project?
2) in your jQuery code in lines:
$('#screen').css('background-image', 'url("' + array[now] + '")');
you using bad array name array[now], your array is image_array, so you must rewrite this into image_array[now]
3) your definition of .click function is not correct. You must define it as: .click(function(){ ... });, so your lines will look like:
// left click
$("#left").click(function(){
if(now > 0){
now--;
}
$('#screen').css('background-image', 'url("' + image_array[now] + '")');alert(now);
});
and
// right click
$("#right").click(function(){
if(now < image_array.length-1){
now++;
}
$('#screen').css('background-image', 'url("' + image_array[now] + '")');alert(now);
});
Here is working JSFiddle solution: JSFiddle
Here is the second solution with updated IF terms: JSFiddle

Related

HTML5 Video Bookmark - Store current time on click and play

I am creating a bookmark section for the video using jquery. This is currently static.
On click, I am appending link with the currentime in a div. You can then click on the appended links to play the video from that position (e.g. 5th second).
Currently, I am using click function inside click function which is not a good approach. If I remove the second function outside then it does not work as it is unable to find the value.
Could someone please suggest a better way to achieve this? I have created a fiddle link of the code.
Js Fiddle Link - https://jsfiddle.net/cp89db4u/1/
HTML
Bookmark
<div class="bookmarkList"></div>
JS
var myVid = document.getElementById('videoElement');
$('.getTime').on('click', function() {
var mycurrentTime = myVid.currentTime;
$(".bookmarkList").append("<a href='javascript:;' rel='" + mycurrentTime + "' class='bookmarkLink'>" + mycurrentTime + "sec How to get wealth?</a>");
$('.bookmarkList a').click(function(){
myVid.currentTime = $(this).attr('rel');
});
});
Change you Js as below.
var myVid = document.getElementById('videoElement');
$('.getTime').on('click', function() {
var mycurrentTime = myVid.currentTime;
$(".bookmarkList").append("<a href='javascript:;' rel='" + mycurrentTime + "' class='bookmarkLink'>" + mycurrentTime + "sec - Click to Play</a>");
});
$(document).on('click', ".bookmarkList a", function() {
myVid.currentTime = $(this).attr('rel');
myVid.play();
});
Hope this helps you

How do I animate/interpolate between two CSS values in Javascript

The following code is working fine, but I'm looking for a way to animate/interpolate between the two creating a slide effect. How can I achieve this?
(I need to have the odd click function as is probably because of how the rest of the site works, otherwise I would have used the jqueryUI slide function)
$('.boxbtn').on('click', function () {
var boxwidth = $('.box').width();
console.log(boxwidth);
console.log('-' + boxwidth + 'px');
var oddClick = $(this).data("oddClick");
$(this).data("oddClick", !oddClick);
if (oddClick) {
$(".box").css('margin-left', ('-' + boxwidth + 'px'));
}
});

jQuery increase number depending on number of elements

Fiddle: http://jsfiddle.net/6vxe8qyj/
I've written a bit of script that adds a new attribute called trackingID that takes the title of each element and adds it into a tracking string.
The above works fine.
<a class="banner" title="This Is mainBanner 1"></a>
Would be:
<a class="banner" title="This Is mainBanner 1" trackingid="MAINBANNER-_-BANNER-_-This+Is+mainBanner+1"></a>
However, I've hit a bit of a bump as I'd like the BANNER section of the string to be numbered. i.e. BANNER+1 - BANNER+2
I then have a second set of banners (#secBanners) that I need to start back at 1 again.
I'm currently getting undefined and am unsure how to continue.
Any help would be great!
Thanks
Using your current methodology of things (EXAMPLE):
JS
$('a').attr("trackingID", " ");
function tracking(element, attr, attrVal, track, i) {
track.each(function () {
var $this = $(this),
trackRegEx,
newVal = attrVal.replace(/\[intBanner\]/g, i);
$this.attr(attr, newVal);
if ($this.attr('title') !== undefined && $this.attr('title') !== '') {
trackRegEx = $this.attr('title').replace(/ /g, '+');
$this.attr('trackingID', $this.attr('trackingID') + trackRegEx);
}
i++;
});
}
tracking($('#mainBanners a'), 'trackingID', 'MAINBANNER-_-BANNER[intBanner]-_-', $('#mainBanners a[trackingID]'), 0);
tracking($('#secBanners a'), 'trackingID', 'PROMOBANNER-_-BANNER[intBanner]-_-', $('#secBanners a[trackingID]'), 0);
Is this what you wanted?
Demo#Fiddle
$(".banner").each(function() {
var title = this.title.replace(/\s+/g, "+");
$(this).attr({
"trackingid": "MAINBANNER-_-BANNER+" + title.slice(-1) + "-_-" + title
});
});
P.S. please do your other checks, such as empty/undefined etc. as you please.
This will do what you requested:
$('#mainBanners a.banner').attr('trackingID',function(i){
return 'MAINBANNER-_-BANNER+' + (i+1)
});
$('#secBanners a.banner').attr('trackingID',function(i){
return 'PROMOBANNER-_-BANNER+' + (i+1)
});
http://jsfiddle.net/6vxe8qyj/4/

jQuery(...).val(...).xxx is not a function

I want to use EggImageDropdown, but I have problems with the script.
I embedded it in my testing site and there it works:
http://herzschloss.de/hs/test.php at "Mein Wunschbild".
Now I want to use the same script with the same linked in js-code here:
http://herzschloss.de/Liebesschloss-bestellen at "Mein Wunschbild"
But I get an error.
TypeError: jQuery(...).val(...).EggImageDropdown is not a function
This is the live generated script that didn't work:
function onclick(event) {
var t = jQuery('select[id=dropdown_demo]').val('herz.png').EggImageDropdown('close').EggImageDropdown('update',{src:'hs-motive/herz.png'});t.trigger('change');
}
This is the code:
jQuery('option',element).each(function(i,el){
dropdown.append('<img style="width:100%" onclick="var t=jQuery(\'select[id=' + selectName + ']\').val(\''+ $(el).val() + '\').EggImageDropdown(\'close\').EggImageDropdown(\'update\',{src:\''+ $(el).text() + '\'});t.trigger(\'change\');" src="' + $(el).text() + '"/>');
});
It would be great if you help me!
It's very difficult to embed that much code into an onclick attribute. Better to not do it.
To correct it, create the function directly in the loop instead of creating an attribute.
jQuery('option',element).each(function(i,el){
var img = $('<img>', {style: "width:100%;", src: $(el).text()});
img.click(function() {
var t=jQuery('select[id=' + selectName + ']');
t.val($(el).val()).EggImageDropdown('close')
.EggImageDropdown('update', {src:$(el).text()});
t.trigger('change');
});
dropdown.append(img);
});
Furthermore, looking at your linked site, it appears that the EggImageDropdown function doesn't exist, which means you're not successfully loading the plugin.

scripting in css with some creativity

I found the following creative accepted answer
jQuery('.get-close-to').hover(function() {
var offset = jQuery(this).css('offset');
alert( 'Left: ' + offset.left + '\nTop: ' + offset.top );
});
I wanted to know how .css('offset') is working so I made a jsfiddle but it's alerting "undefined".
Can anyone describes about this, working and is correct way?
Comment:
I know to use .offset() but I don't mean to use this, but my question regards how the accepted answer's code is working ....... with .css('offset')? That's all.
There's no offset property in CSS. with jQuery.css(propertyName) you can only access properties that exist. Everything else will return null.
for example:
jQuery.css('myImaginativePropertyname'); // returns null
jQuery.css('border'); // would return '0px none rgb(0, 0, 0)'
However
You can access the event.target (DOM element) like this:
jQuery('.get-close-to').hover(function(e) {
var elem = e.target;
alert( 'Left: ' + elem.offsetLeft + '\nTop: ' + elem.offsetTop );
}, function(e){});
I added the second function so that the code won't be executed twice. If you have only single function as input on jQuery.hover(), it will execute both in hover and blur. If you add a second function as a parameter, the first one will be executed on hover, while the second will be executed on blur of the element.
Here's the fiddle: http://jsfiddle.net/JLAK4/2/
Some people may argue to use jQuery(this).offset() instead, but why waste cpu cycles for yet another method call while you already have your DOM element populated and at your disposal? jQuery is a nice compatibility layer, I give you that. But abusing and overusing it makes no sense at all.
Do you want to be using .offset() instead?
jQuery('.get-close-to').hover(function() {
var offset = jQuery(this).offset();
alert( 'Left: ' + offset.left + '\nTop: ' + offset.top );
});
Try this:
jQuery('.get-close-to').hover(function() {
var offset = jQuery(this).offset();
alert( 'Left: ' + offset.left + '\nTop: ' + offset.top );
});
I think he wanted to say like this: working fiddle
jQuery('.get-close-to').hover(function() {
var offset = jQuery(this).offset();
alert( 'Left: ' + offset.left + '\nTop: ' + offset.top );
});
But mistakenly he has typed .css('offset') may be.

Categories