I have a div that contains a few pictures, using javascript i scroll left and right in that div, my problem is that for some reason in firefox the values are different that in chrome (works fine):
function scroll_right() {
document.getElementById('left').style.opacity = '1';
document.getElementById('left').style.filter = 'alpha(opacity=100)';
document.getElementById('scroller').scrollLeft += PixelPerInterval;
if (!stop) t = setTimeout('scroll_right()', 10);
else stop = false;
scrX = document.getElementById('scroller').scrollLeft;
pwidth = document.getElementById('cont').clientWidth;
awidth = document.getElementById('cont').scrollWidth;
//document.getElementById('type').innerHTML = scrX + ' ' + (awidth-pwidth);
if (scrX >= awidth - pwidth) {
//type.innerHTML = scrX + ' right';
document.getElementById('right').style.opacity = '0.4';
document.getElementById('right').style.filter = 'alpha(opacity=40)';
}
}
using scroll_left it's easy, just have scrX = 0.
The outer container is called scroller its width is fixed, and the inner container is called cont and its width isn't set by the user so unlimited pictures can be entered.
Any ideas? (without using jquery).
thanks alot.
Btw html code:
<img src="left.png" id="left" onmouseover="scroll_left();" onmouseout="stop_scroll();" />
<div id="scroller">
<div id="cont">
<a onclick="main(this);" href="#">
<img class="thumb" id="persp" src="sport/911-persp.png" alt="persp" />
</a>
<a onclick="main(this);" href="#">
<img class="thumb" id="side" src="sport/911-side.png" alt="side" />
</a>
<a onclick="main(this);" href="#">
<img class="thumb" id="front" src="sport/911-front.png" alt="front" />
</a>
</div>
</div>
<img src="right.png" id="right" onmouseover="scroll_right();" onmouseout="stop_scroll();" />
Related
I have two banners which I added recently to my website and I'd like to change the banners every 5 seconds,
unfortunately, it shows only the first one and freezes
this is my whole code for foreach data
var links = ["http://site", "http://site"];
var images = ["/uploads/ad1.png", "/uploads/ad2.png"];
var i = 0;
var renew = setInterval(function() {
if (links.length == i) {
i = 0;
} else {
document.getElementById("bannerImage").src = images[i];
document.getElementById("bannerLink").href = links[i];
i++;
}
}, 500);
<?php foreach ($messages as $message){
?>
<a href="?id= <?php echo $message['message_id']?>" class="waves-effect waves-light"> details <i class="fas fa-angle-double-left ml-2"></i>
</div>
<br>
</div>
</div>
<div class="container">
<div class="text-center">
<a id="bannerLink" href="http://site" onclick="void window.open(this.href); return false;">
<img id="bannerImage" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" width="320" height="120" alt="some text">
</a>
</div>
</div>
</div>
This code here will change the image and the link every 5 seconds.
var links = ["http://site","http://site"];
var images = ["https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500","https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"];
var i = 0;
var renew = setInterval(function(){
document.getElementById("bannerImage").src = images[i];
document.getElementById("bannerLink").href = links[i];
i++;
if (i == links.length) {
i = 0;
}
}, 5000);
<div class="container">
<div class="text-center">
<a id="bannerLink" href="http://site" onclick="void window.open(this.href); return false;">
<img id="bannerImage" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" width="320" height="120" alt="some text">
</a>
</div>
</div>
I rearranged the loop so it will always change an image every 5 seconds. Before you have the reset taking an entire round, adding 5 seconds.
I also changed 500 to 5000 (it's in milliseconds)
Problem: How do I clone each image from a list and "paste" them into another list?
I have searched but haven't found any solution close enough for my solution.
Short brief: I am creating a slideshow with thumbnails (jQuery-library: Slippry Slider). I want the thumbnails to work dynamicly, depending on the amount of slides.
So first I have some HTML containing the slides:
<ul id="thumbnails">
<li>
<a href="#slide1">
<img src="img/image-1.jpg" alt="This is caption 1">
</a>
</li>
<li>
<a href="#slide2">
<img src="img/image-2.jpg" alt="This is caption 2">
</a>
</li>
<li>
<a href="#slide3">
<img src="img/image-4.jpg" alt="And this is some very long caption for slide 4.">
</a>
</li>
Now I want to create wrapping elements for my thumbnails, first a div and then a ul-element:
// Create thumb-wrapping-elements
$('.demo_wrapper').append('<div class="thumb-box"></div>');
$('.thumb-box').append('<ul class="thumbs"></ul>');
And I want to check how many slides there is in the HTML above:
// How many thumbs? Check how many slides there is.
var count = $("#thumbnails li").length;
Create right numbers of li-elements and set the right width and values:
// Loop through and create li-elements and links
for (var thumbcounter = 0; thumbcounter < count; thumbcounter++) {
// Whats the width of each thumb?
var thumbwidth = (100/count) + '%';
thumburl = thumbcounter + 1;
$('.thumbs').append('<li><a href="#' + thumburl + '" data-slide="' + thumburl + '" style="width:' + thumbwidth + ';">
Here I would like to loop through each slide img from ul#thumbnails li a above and print them here. How the heck do I do that? :)
</a></li>');
};
See all code here: http://jborg.se/dev/slippry/demo/test.html
Now "a" is inside each a-element, just to make them visible.
Edit:
Made width of thumb more effective, thanks to answer below.
This is what I would like as output by the jQuery loop above (Right now I have everything right, except the images - which I do not know how to copy from the HTML and print here as each thumbnail):
<div class="thumb-box">
<ul class="thumbs">
<li>
<a href="#1" data-slide="1">
<img src="img/image-1.jpg" alt="This is caption 1">
</a>
</li>
<li>
<a href="#2" data-slide="2">
<img src="img/image-2.jpg" alt="This is caption 2">
</a>
</li>
<li>
<a href="#4" data-slide="3">
<img src="img/image-4.jpg" alt="And this is some very long caption for slide 4.">
</a>
</li>
</ul>
</div>
something like this?
$(document).ready(function() {
var html = '<div class="thumb-box"><ul class="thumbs"></ul></div>';
$('.demo').append(html);
var count = $("#thumbnails li").length;
var width = (100.00/count) + '%';
var counter = 0;
$('#thumbnails li').each(function() {
counter++;
var newItem = '<li>';
newItem += '<a href= "' + $(this).find('a').attr('href') + '" ';
newItem += 'data-slide="' + counter + '">';
newItem += '<img src="' + $(this).find('img').attr('src') + '" alt="' + $(this).find('img').attr('alt') + '"/>';
newItem += '</a></li>';
$('ul.thumbs').append(newItem);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
ORIGINAL<br/>
<ul id="thumbnails">
<li>
<a href="#1" data-slide="1">
<img src="img/image-1.jpg" alt="This is caption 1"/>
</a>
</li>
<li>
<a href="#2" data-slide="2">
<img src="img/image-2.jpg" alt="This is caption 2"/>
</a>
</li>
<li>
<a href="#4" data-slide="3">
<img src="img/image-4.jpg" alt="And this is some very long caption for slide 4."/>
</a>
</li>
</ul>
<br/>
DEMO
<div class="demo">
</div>
Try
// exported and edited the thumbwidth var for efficiency
var thumbwidth = (100/count) + '%';
// Loop through and create li-elements and links
for (var x = 0; x < count; x++) {
var imgEl = $('#thumbnails').find('img').eq(x).prop('outerHTML');
$('.thumbs').append('<li>'+ imgEl + '</li>');
}
PS- Sorry for no explanation and the mess, I'm on an iPad.
I'm trying to implement a plugin called kort kort plugin , cool thumbs. The problem is that the plugin is coded to work in this way
all img must be direct children of a div , example
<div class="kort">
<img src="my_img.png" />
<img src="my_img.png" />
<img src="my_img.png" />
<img src="my_img.png" />
<img src="my_img.png" />
<.div>
but in my case, I need to add a link to the img so the the will look like
<div class="kort">
<a href="#"><img src="my_img.png" /><a/>
<a href="#"><img src="my_img.png" /><a/>
<a href="#"><img src="my_img.png" /><a/>
<a href="#"><img src="my_img.png" /><a/>
<a href="#"><img src="my_img.png" /><a/>
<.div>
Here the plugins core core i think that line 91 is the source of problem but I'm not sure , I tried to edit and modify several part of code but in vain .
You can change the way you are finding the elements. Instead of looking for the children, you can look for the image tags.
What the code does now:
function updateState() {
elementLeft = element.offsetLeft;
elementWidth = element.offsetWidth;
elementChildren = [].slice.call( element.children );
}
What you can try to do:
function updateState() {
elementLeft = element.offsetLeft;
elementWidth = element.offsetWidth;
elementChildren = [].slice.call( element.getElementsByTagName("img") );
}
I made a menu, and just now I added
<!DOCTYPE html>
to the document, and it ceases to function. However the code is still running, will still print to console on mouseover etc. I tried other doctypes and they break it too, it just stays static.
What is it about a doctype that could cause JavaScript to not work?
JS:
var total_width = "960";
var slide_width = "182";
var slide_margin = "10";
var expand_width = "374";
var icon_width = "32";
var icon_margin = "15";
var slide_number = "5";
function slideid(i) {
var m = document.getElementById("slide"+i);
var l = document.getElementById("slideimg"+i);
var k = document.getElementById("slidetext"+i);
var j = document.getElementById("slidediv"+i);
return [m, l, k, j]
}
function compat() {
if (window.opera) {
for (var i=1;i<6;i++) {
s = slideid(i);
s[3].style.position="relative";
s[3].style.bottom="46px";
}
}
if (document.all && !(window.opera)) {
for (var i=1;i<6;i++) {
s = slideid(i);
s[0].style.height="60px";
s[1].style.display="none";
var iecontents = s[2].innerHTML;
s[0].innerHTML=iecontents;
s[0].style.fontFamily="'astonishedregular',Impact,serif";
s[0].style.fontSize="40px";
s[0].style.color="#fff";
s[0].style.textDecoration="none";
s[0].style.padding="10px auto";
}
}
}
function expand(x) {
if (document.all && !(window.opera)) {
return
}
var shrink = new Array();
for (var i=1;i<6;i++) {
if (i === x) {
var expander = i;
}
else {
var d = shrink.length;
shrink[d] = i;
}
}
for (var i=0;i<4;i++) {
s = slideid(shrink[i]);
var slide_shrink = ((total_width-(5*slide_margin))-expand_width)/(slide_number-1);
s[1].style.marginLeft=(slide_shrink-icon_width)/2;
s[0].style.width=slide_shrink;
s[2].style.display="none";
s[3].style.width="0"
}
s = slideid(expander);
s[1].style.marginLeft=icon_margin;
s[0].style.width=expand_width;
s[2].style.display="inline-block";
s[3].style.width=expand_width-icon_width-icon_margin-7;
}
function shrink() {
if (document.all && !(window.opera)) {
return
}
for (var i=1;i<6;i++) {
s = slideid(i);
s[1].style.marginLeft=(slide_width-icon_width)/2;
s[0].style.width=slide_width;
s[2].style.display="none";
s[3].style.width="0";
}
}
And HTML:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="menu.js"></script>
</head>
<body onload="compat()">
<div id="Menu" onMouseout="shrink()">
<a href="#" class="slide" id="slide1" onMouseOver="expand(1)">
<img id="slideimg1" src="home.png" />
<div id="slidediv1">
<h2 id="slidetext1">Home</h2>
</div>
</a>
<a href="#" class="slide" id="slide2" onMouseOver="expand(2)">
<img id="slideimg2" src="sound.png" />
<div id="slidediv2">
<h2 id="slidetext2">Music</h2>
</div>
</a>
<a href="#" class="slide" id="slide3" onMouseOver="expand(3)">
<img id="slideimg3" src="blog.png" />
<div id="slidediv3">
<h2 id="slidetext3">Blog</h2>
</div>
</a>
<a href="#" class="slide" id="slide4" onMouseOver="expand(4)">
<img id="slideimg4" src="note.png" />
<div id="slidediv4">
<h2 id="slidetext4">Bio</h2>
</div>
</a>
<a href="#" class="slide" id="slide5" onMouseOver="expand(5)">
<img id="slideimg5" src="way.png" />
<div id="slidediv5">
<h2 id="slidetext5">Links</h2>
</div>
</a>
</div>
</body>
You need to add "px" to marginLeft and width. Setting CSS style which requires units will not work without unit. And you are missing <html></html> tags.
function expand(x) {
if (document.all && !(window.opera)) {
return
}
var shrink = new Array();
for (var i=1;i<6;i++){
if (i === x) {
var expander = i;
}
else {
var d = shrink.length;
shrink[d] = i;
}
}
for (var i=0;i<4;i++){
s = slideid(shrink[i]);
var slide_shrink = ((total_width-(5*slide_margin)) - expand_width) / (slide_number-1);
s[1].style.marginLeft=(slide_shrink-icon_width)/2 +"px";
s[0].style.width=slide_shrink +"px";
s[2].style.display="none";
s[3].style.width="0"
}
s = slideid(expander);
s[1].style.marginLeft=icon_margin +"px";
s[0].style.width=expand_width + "px";
s[2].style.display="inline-block";
s[3].style.width= (expand_width-icon_width-icon_margin-7) +"px";
}
function shrink() {
if (document.all && !(window.opera)) {
return
}
for (var i=1;i<6;i++){
s = slideid(i);
s[1].style.marginLeft=(slide_width-icon_width)/2 +"px";
s[0].style.width=slide_width + "px";
s[2].style.display="none";
s[3].style.width="0";
}
}
document.all is a Microsoft thing, not covered by a standard (more in this other Q/A). Remove all use of it and use document.getElementById as necessary instead.
My guess is that if you look in the JavaScript console, you'll see errors related to document.all not existing, because while whatever browser you're testing on supported it in quirks mode, when you switched it to standards mode (by adding a doctype), it stopped supporting it.
Adding the HTML5 DOCTYPE (<!DOCTYPE html>) puts browsers into "Standards mode". Without it, the browser will be in "Quirks mode", which is essentially an IE5/legacy compatibility mode. MDN has more information on the subject, and a list of differences in behaviour in Firefox.
The biggest problem with your script is the use of document.all, which is a non-standard Microsoft thing. You'll want to use standard DOM stuff like document.getElementById.
include your count script before closing body tag and dont forget to add closing tag of html
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="menu.js"></script>
</head>
<body onload="compat()">
<div id="Menu" onMouseout="shrink()">
<a href="#" class="slide" id="slide1" onMouseOver="expand(1)">
<img id="slideimg1" src="home.png" />
<div id="slidediv1">
<h2 id="slidetext1">Home</h2>
</div>
</a>
<a href="#" class="slide" id="slide2" onMouseOver="expand(2)">
<img id="slideimg2" src="sound.png" />
<div id="slidediv2">
<h2 id="slidetext2">Music</h2>
</div>
</a>
<a href="#" class="slide" id="slide3" onMouseOver="expand(3)">
<img id="slideimg3" src="blog.png" />
<div id="slidediv3">
<h2 id="slidetext3">Blog</h2>
</div>
</a>
<a href="#" class="slide" id="slide4" onMouseOver="expand(4)">
<img id="slideimg4" src="note.png" />
<div id="slidediv4">
<h2 id="slidetext4">Bio</h2>
</div>
</a>
<a href="#" class="slide" id="slide5" onMouseOver="expand(5)">
<img id="slideimg5" src="way.png" />
<div id="slidediv5">
<h2 id="slidetext5">Links</h2>
</div>
</a>
</div>
</body>
</html>
Okay, so I am in the process of recreating this feature:
http://www.w3.org/html/logo/#the-technology
I current have it so when you click on a link, it will add a class to the image that relates to that link (href="#one" on the <a> and then id="#one" on the <img>), however it is currently not going through each <a> tag and only one. And also it is not removing the class I requested.
Code follows:
JS
$(document).ready(function() {
var container = '#portfolio #text_container';
var img_container = '#portfolio #image_container';
$(container).children('a').bind('click', function() {
var this_attr = $(this).attr('href');
var this_img = $(img_container).find('img').attr('id');
if(this_attr == this_img) {
//$(img_container).find('img').hasClass('current').removeClass('current');
// ^^^ This line isn't working, any ideas? :/
$(img_container + ' img[id*="' + this_attr + '"]').addClass('current');
}
else {
alert(this_img + ' this img');
alert(this_attr + ' this attr');
}
});
});
And the HTML is as follows
<div id="portfolio">
<div id="image_container">
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" alt="" class="current" id="#one" />
<img src="http://static.jquery.com/files/rocker/images/btn_downloadLarge.gif" alt="" id="#two" />
</div>
<div id="text_container">
Item 1
Item 2
<p id="#one" class="current">A bunch of text!</p>
<p id="#two">The second bunch of text!</p>
</div>
</div>
Please let me know if you need any more information :)
rcravens fixed this with the following code..
JS
$(document).ready(function() {
$('#text_container a').click(function(evt) {
evt.preventDefault();
$('.current').removeClass('current');
var href = $(this).attr('href');
$("." + href).addClass('current');
});
And the HTML..
<div id="portfolio">
<div id="image_container">
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" alt="" class="one current" />
<img src="http://static.jquery.com/files/rocker/images/btn_downloadLarge.gif" alt="" class="two" />
</div>
<div id="text_container">
Item 1
Item 2
<p class="one current">A bunch of text!</p>
<p class="two">The second bunch of text!</p>
</div>
</div>
My interpretation of what you are trying to do is here:
http://jsfiddle.net/rcravens/wMhEC/
The code is changed a bit. You shouldn't have multiple elements with the same id.
Bob
The reason this isn't working:
if(this_attr == this_img)
is because this_attr is a URL and this_img is an ID attribute value.