Jquery Slideshow doesn't work - jquery-animate

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var currentImage = $('#slider div');
var nextImage = $('#slider').find('div').next;
var animation = .animate({'marginLeft' : "-=900px"}):
$(document).ready(function(){
$(currentImage).click(function(){
$(currentImage).animate();
});
});
</script>
</head>
<body>
<div id="slideshow">
<div id="slider">
<div id="image">
<img src="slide1.jpg" height="360px" width="960px">
</div>
<div id="image">
<img src="slide2.jpg" height="360px" width="960px">
</div>
<div id="image">
<img src="slide3.jpg" height="360px" width="960px">
</div>
</div>
</div>
</body>
</html>
and CSS
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
margin: 0;
}
p {
margin: 0;
}
#slideshow {
width: 100%;
float: left;
}
#slider {
margin: 10px auto;
height: 360px;
width: 900px;
border: 1px solid #999;
overflow: hidden;
}
#slider #image {
height: 360px;
width: 900px;
float: left;
position: relative;
z-index: 2;
}
This is a HTML (with Jquery in it) and a CSS file.
What i am trying to do is that if you click on an #image, the #image wil animate 900px to the left.
But i have a problem because nothing happen if i click on #image.
Can someone help me?
P.S. I am from the Netherlands, so I apologise if I have bad English.


You have a lot wrong with your script ... try this out:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="slideshow">
<div id="slider">
<div class="image">
<img src="slide1.jpg" height="360px" width="960px">
</div>
<div class="image">
<img src="slide2.jpg" height="360px" width="960px">
</div>
<div class="image">
<img src="slide3.jpg" height="360px" width="960px">
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var currentImage = $('#slider').find('div').first(),
nextImage = currentImage.next();
currentImage.click(function(){
$(this).animate({marginLeft:"-=900px"});
});
});
</script>
</body>
Couple points:
As was called out, make your images use a class instead of an id if you want to reuse the name. Multiple elements with the same id is invalid HTML.
You did not close <div id="slideshow"> ... I added the closing tag.
Move your script down to the bottom of the body ... this is best practice to improve the speed of page rendering (otherwise the page needs to parse the entire script before displaying any content).
Your use of .next() was incorrect ... it is a function, and all functions are called at bare minimum with open/close parenths.
You were already caching #slider div, so I leveraged that existing cachine when searching for nextImage (I applied the .first() function because it will get all of the divs if you don't filter it somehow.
Your storage of the animation was ... wrong, in about every way possible. You can store the animation in variable as a function, but only for reuse, and clearly you are not ready for that yet. I moved the animation down to where it should be, which is applied to the element in the click event itself.
When referencing the DOM names in the .animate() function, you only need to apply quotation marks if you use the CSS version ('margin-left' instead of marginLeft).
No guarantees that this will do what you think it should do because your CSS is ... too much to handle right now, but at least your HTML and JS will now be valid and you can focus on the problem at hand.

Related

Sortablejs - how can exclude element from sorting

Using Sortable.js I'm trying to make only Collapsible elements change their order so if I move element #1 in the place of element #2 they don't affect the green line between them. I've tried filter option but it just blocks my green line element to be draggable but I can put any element in place of it which I want to block. Is it possible to make with library like that?

Since I mentioned using swap, here's a demo that may work (I know it's late but for the record)
Sortable.create(list, {
draggable: ".list-group-item",
filter: ".divider",
swap: true,
swapClass: "highlight",
animation: 150,
});
body {
padding: 1em;
text-align: center;
}
.highlight {
background-color: #f9c7c8 !important;
}
.divider {
height: 20px;
background: green;
width: 3px;
margin-left: 50%
}
<script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<div id="list" class="list-group">
<div class="list-group-item">Item 1</div>
<div class="divider"></div>
<div class="list-group-item">Item 2</div>
<div class="divider"></div>
<div class="list-group-item">Item 3</div>
</div>

How can i add differents styles to differents part of a line in HTML and print everything together?

I want to add different styles to differents parts of a line in HTML and then print that line together. Imagine i have the next line:
Hello my name is Bogdan and i live in Spain.
I managed to add different styles to the line, but i can't manage to put all the parts together with different styles applied to each one of them.
<!DOCTYPE html>
<html>
<head>
<style>
<style>
div{
}.bold{ font-weight: bold;
}
.normal{ font-weight: normal;
}
.italic{
font-style: italic;
}
.left{
text-align:left;
float:left;
}
.container{
letter-spacing:-1px;
width: 372px;
font-family: Monaco,monospace;
font-size:19px;}
.center{
text-align:center;
}
.underline{
text-decoration: underline;
}
.doubleFont{font-size:38px;}
</style>
</head>
<body>
<div class = container>
<div class=>
<div class=>Hello my name is Bogdan</div>
</div>
<div class="underline bold">
<div class=>and i live </div>
</div>
<div class="bold">
<div class=>in Spain</div>
</div>
<br>
</div>
</body>
</html>

Replace the divs with spans like that:
<span>Hello my name is Bogdan</span>
<span class="underline bold">and i live </span>
<span class="bold">in Spain</span>
Spans are inline elements and wrap on one line. Divs always go on next lines unless set otherwise. Also consider setting bigger width on .container class.

Forcing equal height child DIVs in a parent Bootstrap jumbotron

I'm a newbie to Bootstrap and I'm having a problem getting two sibling columns to render to the same height under a parent DIV. Basically, I'm trying to create a "blackboard" next to the video which I'd like to render 100% with the video player but with a black background when the page loads.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Responsive Custom Video Player</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
.jumbotron {
padding: 0;
margin-bottom: 0;
}
.blackboard {
background-color: #000;
color: #fff;
min-height: 100%;
margin: 0 auto;
text-align: left;
}
</style>
<div class="row jumbotron">
<div class="player col-sm-6">
<video width="100%" poster="videos/poster.jpg" id="videoPlayer">
<source src="videos/BigBuckBunny_512kb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="blackboard col-sm-6">
BLACKBOARD
</div>
</div>
</body>
</html>
The "blackboard" DIV is only rendering the height of the text inside the DIV. The jumbotron's default background-color of #eee fills the rest of the DIV.

This works but it seems a bit hacky. Add ID selectors to those two DIVs and:
// Force blackboard to the same height as the player.
$(window).resize(function() {
$("#blackboard").height($("#player").height());
})
$(window).resize(); // On page load

Nivo Slider effects are not working

I've searched and tried several of the solutions to no avail. I'm currently using jQuery 1.7.1 and Nivo Slider 3.0.1 .
You can see the website at http://www.wheelerbikeclub.net (this is a website I created last year and I'm just coming back to now).
None of the effects on my nivo slider in my home page are working. I know there was a point last year where they were, but then I changed something and now they don't and I cannot recollect what it is that happened.
I've made sure the number of columns/boxs/slices evenly divide my images. Does anyone have any idea what the issue is? Is it somehow related to the fact that I'm forcing my slider to cover the entire screen?
Thanks for any feedback, I greatly appreciate it!
I make calls for the jQuery followed by NivoSlider script in the head section
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.3.0.1.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Then in my body in a wrapper I put
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="img/new_slides/slide_1-3.png" alt="" title="#slide_1-caption"/>
<img src="img/new_slides/slide_2-4.png" alt="" />
<img src="img/new_slides/slide_4.png" alt="" />
<img src="img/new_slides/slide_3-1.png" alt="" />
</div>
<div id="slide_1-caption" class="nivo-html-caption">
<strong>Find Out More</strong>.
</div>
</div>
There are four images and I'm just testing the caption with image one.
In my nivo-slider css I have (not the entirety, just where I think the problem might lay)
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
z-index:2;
}
.nivo-slice {
display:block;
position:absolute;
z-index:100;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }
And in my main styles.css I have
.slider-wrapper { position:relative;
top: 0px;
left: 0px;
width: 100%;
position:fixed;
z-index:0; }
#slider-div { min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px; }
Hope that makes sense.

Flexslider - image preloader

I have a problem with my responsive flexslider plugin. The plugin works fine unless you have many images in the actual slideshow. The loading behavior is then just not acceptable.
I was hoping someone can help me with the following flexslider image preloader script since I can't get it to work.
Here is the code I'm using:
FLEXSLIDER HTML
<div class="slider">
<div class="flexslider loading" style="overflow-x: hidden; overflow-y: hidden; ">
<ul class="slides" style="width: 5200%; -webkit-transition-duration: 0s; -webkit-transform: translate3d(-9702px, 0px, 0px); ">
<li style="float: left; display: block; width: 940px; ">
<img src="image1.jpg">
</li>
<li style="float: left; display: block; width: 940px; ">
<img src="image2.jpg">
</li>
<li style="float: left; display: block; width: 940px; ">
<img src="image3.jpg">
</ul>
</div>
FLEXSLIDER SCRIPT IN HTML HEAD
<!-- FlexSlider -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",  
slideshow: false,
controlsContainer: ".slider"
start: function(slider) {
slider.removeClass('loading');}
});
});
</script>
FLEXSLIDER.CSS
.loading {min-height: 300px; background: url('loader.gif') no-repeat center center;}
Any help is appreciated!

Instead of using the slider object from flexslider, try just making the slider element itself a jQuery object.
<!-- FlexSlider -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
var target_flexslider = $('.flexslider');
target_flexslider.flexslider({
animation: "slide",
slideshow: false,
controlsContainer: ".slider",
start: function(slider) {
target_flexslider.removeClass('loading');
}
});
});
</script>

I tried for many time and for me it worked like this:
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
start: function(slider) {
slider.removeClass('loading');
}
});
});
</script>
And on flexslider.css
.loading {min-height: 300px; background: url('loader.gif') no-repeat center center !important;}
Note the "!important" part, it didn't work without because it was colliding with flexslider's default white background. I set the html like
<div class="flexslider loading">

I managed to get it working using the callback "before" instead of "start".
So the JS bit would be:
<!-- FlexSlider -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
slideshow: false,
controlsContainer: ".slider"
before: function(slider) {
slider.removeClass('loading');
}
});
});
</script>

Try adding for each li 'style="display: none;"', except the first li. It should work.

I was struggling with this too, and the answer is really simple in fact. The only thing that is wrong in your code is this:
<div class="flexslider loading" style="overflow-x: hidden; overflow-y: hidden; ">
And in your css you define for loading the class .loading
So you must change the clas for that div. Like this:
<div class="loading" style="overflow-x: hidden; overflow-y: hidden; ">