Nivo Slider effects are not working - slider

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.

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 move an img under background

I have this code:
<img src="<?php echo get_template_directory_uri() ?>/img/loader.gif" alt="<?php echo ANSIMUZ_THEME; ?>" />
How can I move loader.gif under main background? (so it will show up before main background and hides when background is loaded)
main background is somewhere maybe here:
$('#home-title').backstretch([
myJsVars.front_background1
I dont really know java
You can probably use pure css z-index to set the hierarchy.
Make sure the loader image has a lower z-index than #home-title.
Like this:
#home-title {
position: relative;
z-index: 2;
}
img#loader {
position: relative;
z-index: 1;
}
Don't forget add the id attribute id="loader" on your loader image element.
try this ...may be help ful to you
$(window).load(function() {
$('.image_loader').fadeOut(2000);
});
.main{
position:relative;
}
.image_loader{
position:absolute;
z-index:10;
top:0;
left:0;
width:100px;
}
.background_image{
z-index:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main">
<img class="background_image" src="http://placehold.it/700" alt="background" />
<img class="image_loader" src="http://oi57.tinypic.com/2rww2gz.jpg" alt="loader" />
</div>

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; ">

Difference in KendoUI upload dialog when hosted on live linux server vs on OSX dev machine

I set up a simple form to upload files using KendoUI, and looks and works great on my dev machine (OSX Apache), but uploaded to my server (Linux Apache) it looks bad as you can see in the images. I tested with same results in both firefox and chrome, and both are fine from local copy and bad from remote. I have tripple checked that all the files are the same on both local and remote servers.
vs
My code is as follows...
<!doctype html>
<html>
<head>
<title>Test | Animation Tool</title>
<link href="./kendo/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="./kendo/styles/kendo.kendo.min.css" rel="stylesheet"/>
<script src="./jquery.js"></script>
<script src="./kendo/js/kendo.all.min.js"></script>
<style type="text/css">
body{
background-Color: #f78049;
background-image: url(stripe.png);
background-repeat: repeat-y;
margin:0;padding:0;
font-family:sans-serif;
}
#sidebar{
background-Color: #f78049;
border: 3px solid #ef652a;
margin:0;padding:0;
width: 300px;
float: left;
height: 900px;
}
.step{
border-top: 3px solid #ef652a;
}
.step p.first{
display: inline;
}
.step-id{
background-color: #ef652a;
-moz-border-radius: 7px;
font-size: 30px;
margin: .2em .2em .2em 0;
padding: .1em .2em;
}
.t-button{
margin: 0 37px 0 37px;
width:203px;
top: 10px;
}
button.t-button{
margin: .2em 37px .2em 37px;
width:220px;
}
.t-upload-files{
margin: 0.2em 2.6em 1em;
}
#main{
float:left;
}
h1, h2{
margin:0;padding:0 0 0.3em;
text-align:center;
color:#ffd;
}
#phone,#anim{
width:401px;
height:875px;
background-image:url(phone.png);
position: absolute;
top:10px;
left:350px;
}
#anim{
background-image:url("files/spec.png");
background-position:0 0;
background-repeat:no-repeat;
height:480px;
left:391px;
top:144px;
width:320px;
}
a img{
border:none;
}
</style>
<script type="text/javascript">
$(function(){
var i=0, x={timer:null, frames:4, frameWidth:320, frameRate:150};
var addTestFile = function(filename){
$('#test-files').append(
$('<button />').addClass('t-button custom').html(filename).click(function(){
$anim = $('#anim').css({backgroundImage:'url("files/'+filename+'")'})
var loop = function(){
$anim.css({backgroundPosition:"0 0"}).animate({borderWidth:0},150,function(){
$anim.css({backgroundPosition:"-320px 0"}).animate({borderWidth:0},150,function(){
$anim.css({backgroundPosition:"-640px 0"}).animate({borderWidth:0},150,function(){
$anim.css({backgroundPosition:"-960px 0"}).animate({backgroundPosition:"-640px 0"},250,function(){
})
})
})
})
}
clearInterval(x.timer)
x.timer = setInterval(function(){
loop()
}, 950)
})
)
}
$.get('files.php',function(d){
$.each(d, function(i,file){
addTestFile(file)
})
})
$("#files").kendoUpload({
async: {
saveUrl: "./save.php",
// removeUrl: "./remove.php",
autoUpload: true
},
showFileList: true,
success: function(e){
$('.t-file').last().siblings().remove()
var filename = e.files[0].name.replace(/\s/g,'-')
$('#test-files button').filter(function(){
return $(this).text() == filename
}).remove()
addTestFile(filename)
console.log('uploaded' + e.files[0].name);
// return true;
},
error: function(e){
console.log("Error (" + e.operation + ")");
e.preventDefault(); // Suppress error message
}
});
});
</script>
</head>
<body>
<div id="sidebar">
<h2>Animation Tool</h2>
<div id='one' class='step'>
<span class='step-id'>1</span>
<p class="first">Get the specification image</p>
<p><a href="getspec.php" class='t-button'>Download image...</a></p>
</div>
<div id='two' class='step'>
<span class='step-id'>2</span>
<p class="first">Edit the downloaded image file</p>
</div>
<div id='three' class='step'>
<span class='step-id'>3</span>
<p class="first">Upload your edited file</p>
<input name="files" id="files" type="file" />
</div>
<div id='two' class='step'>
<span class='step-id'>4</span>
<p class='first'>Test you animation</p>
<span id='test-files'></span>
</div>
</div>
<div id="main">
<div id="anim"></div>
<div id="phone"></div>
</div>
</body>
</html>
My guess is one of the css files is not getting pulled in. I created a fiddle here where I left out the kendo.common.min.css and the result is not exactly the same as yours, but too darn close.
http://jsfiddle.net/B4dWB/
Check your css references and make sure they are all correct and loaded in.
The easiest way to validate everything is loading correctly is to use your browser developer tools (Firebug in Firefox, Developer Tools in Chrome/Safari).
On the network tab, you should be able to see if the Kendo UI CSS and JavaScript files are being properly loaded from your remote server. (This is also a good time to make sure you're not seeing a cached version of your page/resources. That's always an easy browser debugging gotcha.)
In general, since Kendo UI runs in the browser, your hosting environment and web server should have no impact. As long as the files reach the browser, the rendering and behavior should function properly.

On tumblr, how do I code a frame around my header?

Here is my tumblr blog:
thestorywithnoending.tumblr.com
I want a frame around the image header, so that the content disapears when I scroll down,
but the header stays in place...
just like this blog:
tiredskin.tumblr.com
but I cant figure out how to do this,
please help,
thanks.
Here's what you need to do.. Replace this in your current code
</style>
<body>
<p><center><img src="http://michaeljamess.webs.com/blogheader.png" border="0"/></center>
</p>
with this
<style type="text/css">
#left {
float: left;
margin-left:338px;
width: 500px;
height: 100px;
font-size: 11px;
text-align:left;
position:fixed;
background-color:none;
padding:0px;
z-index:999;
top:0px;
}
#content{
margin-top:300px!important;
}
</style>
<div id="left">
<center>
<a href="http://thestorywithnoending.tumblr.com">
<img src="http://michaeljamess.webs.com/blogheader.png" border="0"/>
</a>
</center>
</div>
p.s if it solved your problem, mark it as the best answer :)