Why isnt my slider showing up? - javascript

I'm working on making a custom button that drops down a jquery ui slider beneath it. The idea is you can slide the slider and it changes the background color of the button. For some reason, the slider isn't appearing and I cant figure out why.
<div id="button-container">
<div id="button">
<div id="inner_triangle_button"></div>
</div>
<div id="slider_container">
<div id="slider_container_triangle"></div>
<div id="shadow_slider"></div>
</div>
</div>
<script>
$('#button').click(function() {
if ( !$('#slider_container').is(":visible") )
$('#slider_container').fadeIn(100);
else
$('#slider_container').fadeOut(100);
});
$(function() {
$('.shadow_slider').slider({
min: 0,
max: 255,
change: updateColor,
slide: updateColor
});
});
function updateColor() {
var color = $('#shadow_slider').slider("value")
$('#button').css('background', '#'+color+'0000');
}
</script>
I've made a JSFiddle for the problem
http://jsfiddle.net/drs4/bpsb20wd/5/

Hadn't imported the jquery-ui.css file and the wrong selector was being used

Related

draggable ui that implicate a condition on specific position

I am struggling in a specific problem. I actually have a draggable element based on a grid of 4 and I would like to create an event each time the draggable item reaches a specific position on this gird.
Here is the html of this grid,
<div class="selector">
<div class="title">
<h2>Vælg lånebeløb</h2>
</div>
<div class="draggable">
<h3 id="krd">kr</h3>
</div>
<div class="line">
<img src="./resources/images/line.png" alt="line">
</div>
<div class="legend">
<p>3.000</p>
<p>4.000</p>
<p>5.000</p>
<p>6.000</p>
</div>
</div>
and here is the jquery,
$("#krd").draggable({
grid: [ 190, 0 ],
cursor: "move",
containment: '.selector',
drag: function( event, ui ) {
if(ui.position.left = 190) {
$(".bluebox h2").text("3.000 Kr");
} else if (ui.position.left = 380) {
ect......
} {
}
}
});
What I am trying to do is that when we move the bar, it changes the text in the sidebar. I tried different options since but couldn't figure out what I am missing. Here is the link of the page on github of the project, maybe you will have an idea about it.
Here is the link of the code in github
https://github.com/erwanriou/goKredit---Frontpage/
and the render of the page to get a better idea of the problem.
https://erwanriou.github.io/goKredit---Frontpage/
Expanding upon my comment, I would advise using jQuery UI Slider. You will need to theme it, but the code would be:
$(function() {
$("#krd").slider({
min: 3,
max: 6,
value: 3,
slide: function(e, ui) {
$(".bluebox h2").text(ui.value + ".000 Kr");
}
});
});
Example (in progress): https://jsfiddle.net/Twisty/bjfuLjzL/2/

Scrolling div horizontally

How can I make this scroll left or right using navigation button?
<div class="slider-wrap">
<div class="slide-wrap">
<div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
</div>
</div>
<div id="slider-left" class="slider-nav"></div>
<div id="slider-right" class="slider-nav"></div>
JS
$("#slider-left").click(function(){
alert("< clicked.");
});
$("#slider-right").click(function(e){
alert("> clicked.");
$('.slide-wrap').scrollLeft(5000);
});
Fiddle
You are selecting the wrong <div>. Note the selector: $('.slider-wrap') (not .slide-wrap).
$("#slider-left").click(function () {
$('.slider-wrap').animate({
scrollLeft: 0
}, 200);
});
I have used .animate because you get visual feedback about what's happening (so I think using animate is better for UX). This would work equally well with .scrollLeft() though:
$("#slider-left").click(function () {
$('.slider-wrap').scrollLeft(0);
});
See it working in a fiddle

Run countUp.js when user scrolls certain amount of pixels from top of screen

Hi Please can someone help me, basically i want to run the Javascript when #stats become fully visible around center of the page. Once the javascript has run once i dont want it to run again unless they revisit the page.
Any help would be much appreciated thanks in advance.
My Code is below.
<div id="stats">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4">
<h2><span id="totalFranchises" class="franchise-number">108</span></h2>
</div>
<div class="col-xs-12 col-sm-8">
</div>
</div>
</div>
</div>
<script>
var options = {
useEasing : true,
useGrouping : true,
}
var countUp = new countUp("totalFranchises",108, 256, 0, 3, options);
countUp.start();
</script>
Cheers,
Wes.
I did this recently and I used the heights of the divs above the div that contains the countUp. If you want to understand more read here, here and here. This if you don't want to use jQuery.
My solution looks something like this in the controller:
$window.onscroll = function() {
myFunction()
};
function myFunction() {
var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop; //this makes it work in all browsers
var height = document.getElementById("previousDiv").clientHeight; //the height of the previous div for example
if (bodyScrollTop > height) {
//start the countUp
} else {
//something else
}
}

Jquery Animation : how to make text appear when a element has changed color or styles

Umm guys i got stuck in Jquery when i was fiddling along with some animation The thing was i wanted to make a textbox appear and show the text when a button is highlighted like a gallery ummm ..... . Anyway i made halfthrough but the text is not displaying . so any help...
P.s the idea was to have a button/circle glow and a text to appear below it
like when one button/circle glows an empty space below shows the text associated with it.
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function slide()
{//slide start
$(".textHold").hide()
.delay(1000)
.queue(
function()
{//queue function start
$(".red").css(
{//css start
"background-color":"#000"
}//css end
);//css ();
$(this).dequeue();
}//queue function/\
);//queue();
$(".textHold").fadeIn(500);
$(".textr").fadeIn(500).fadeOut(5000).delay(500);
$(".textHold").fadeOut(500).delay(500);
$(".textHold")
.queue(
function ()
{
$(".red").css({"background-color":"#f00"});
$(this).dequeue();
}
)
.delay(500)
.queue(
function()
{
$(".blue").css({"background- color":"#000"});
$(this).dequeue();
}
)
.fadeIn(500);$(".text").fadeIn(500).delay(500).fadeOut(500).delay(500);
$(".textHold").fadeOut(500).delay(500);
$(".textHold").queue(
function()
{
$(".blue").css({"background-color":"#00f"});
$(this).dequeue();
}
);
}//slide() /\
setInterval(function(){slide();},500);
</script>
</head>
<body>
<div class="red">
</div>
<div class="blue">
</div>
<div class="textHold">
<span class="text">Hello blue</span>
<span class="textr">Hello Red</span>
</div>
</body>
It seems to me that the code to change the style for the button is under your control (not a third party code). In this case, you can trigger a JQuery custom event when button changes color. There would be a listener to this event which will according make the text appear.
See: http://www.sitepoint.com/jquery-custom-events/

How to fix a jquery .animate margin slider?

My website is: http://www.grozav.com
I need help in repairing the code at the thumbnail slider part (Portfolio). If someone clicks the arrow twice, really fast, it gets off track, and the coding stops working.
HTML Markup:
<div id="portfolio">
<div id="up-arrow">UP</div>
<div id="thumbnails">
<div id="slider">
thumbnails go here
</div>
</div>
<div id="down-arrow">DOWN</div>
</div>
Jquery:
$('#up-arrow a').stop().click(function(){
if($('#slider').css("margin-top")!='0px' ){
$('#slider').stop().animate({'margin-top':'+=360px'})
$('#down-arrow').css({'background-position':'0 0px'})
$('#down-arrow a').css({'cursor':'pointer'})
//CHANGE <='PX' VALUE FOR NEXT SLIDE
if($('#slider').css("margin-top")<='-360px'){
$('#up-arrow').css({'background-position':'0 -28px'})
$('#up-arrow a').css({'cursor':'help'}) }
$('#down-arrow').css({'background-position':'0 0px'})
}
else if ($('#slider').css("margin-top")>'0px') {
$('#slider').css({'margin-top':'0px'});
}
});
$('#down-arrow a').stop().click(function(){
if($('#slider').css("margin-top")!='-720px' || $('#slider').css("margin-top")<'-720px'){
$('#slider').stop().animate({'margin-top':'-=360px'})
$('#up-arrow').css({'background-position':'0 0px'})
$('#up-arrow a').css({'cursor':'pointer'})
//CHANGE <='PX' VALUE FOR NEXT SLIDE
if($('#slider').css("margin-top")<='-360px'){
$('#down-arrow').css({'background-position':'0 -27px'})
$('#down-arrow a').css({'cursor':'help'}) }
$('#up-arrow').css({'background-position':'0 0px'})
}
else if ($('#slider').css("margin-top")<'-720px') {
$('#slider').css({'margin-top':'-360px'});
}
});
It changes the button aspect when it's at the beginning and at the end of the slides. I coded it this way due to lack of knowledge in the sliders domain.
How can I fix it, or at least prevent it from clicking twice?
Why not wrap your function in an if condition that checks to see if the slider is being animated? Then they'll only work when the animation is not occurring.
Something like if( !$('#slider').is(':animated') ){ ... your code ... }

Categories