Search the Community

Hello, I attached the code that I used for the slider. I'm using p5.js. It doesn't work if I insert separately the JS code in the sketch.js page. HTML: <input type="range" min="1" max="100" value="50" class="slider" id="myRange"> <p id="demo">Value: </p> Javascript: var slider = document.getElementById("myRange"); var output = document.getElementById("demo"); slider.oninput = function() { output.style.fontSize = slider.value + "px"; } Thank you all!

Hello, Does anyone know how to change the color of just the First Half of this Range Slider Bar? Here is the link to the example on W3: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_rangeslider_round Thank you.

Hello, I have another issue. I am using wordpress to build a new website. The theme has a slide show which loads its pictures from the featured images of my pages. I would like to hide a certain featured image of a certain page whilst I still have it on the slideshow. Is this possible?? Thank you in advance!

I am trying to center my images with a background object. http://www.appleblossomentertainment.com What is it I need to do? #tooplate_middle { clear: both; width: 880px; height: 240px; padding: 50px; overflow: hidden; background: url(../images/middle.png);}#mid_title { font-size: 30px; line-height: 38px; font-weight: 400; color: #fff; margin-bottom: 20px; }@import url(http://fonts.googleapis.com/css?family=Varela+Round);html,body { background: #333 url("http://codepen.io/images/classy_fabric.png");}.slides { padding: 0; width: 609px; height: 220px; display: block; margin: 0 auto; position: relative;}.slides * { user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }.slides input { display: none;}.slide-container { display: block;}.slide { top: 0; opacity: 0; width: 609px; height: 220px; display: block; position: absolute; transform: scale(0); transition: all .7s ease-in-out;}.slide img { width: 100%; height: 100%;}.nav label { width: 200px; height: 100%; display: none; position: absolute; opacity: 0; z-index: 9; cursor: pointer; transition: opacity .2s; color: #FFF; font-size: 156pt; text-align: center; line-height: 380px; font-family: "Varela Round", sans-serif; background-color: rgba(255, 255, 255, .3); text-shadow: 0px 0px 15px rgb(119, 119, 119);}.slide:hover + .nav label { opacity: 0.5;}.nav label:hover { opacity: 1;}.nav .next { right: 0;}input:checked + .slide-container .slide { opacity: 1; transform: scale(1); transition: opacity 1s ease-in-out;}input:checked + .slide-container .nav label { display: block;}.nav-dots { width: 100%; bottom: 9px; height: 11px; display: block; position: absolute; text-align: center;}.nav-dots .nav-dot { top: -5px; width: 11px; height: 11px; margin: 0 4px; position: relative; border-radius: 100%; display: inline-block; background-color: rgba(0, 0, 0, 0.6);}.nav-dots .nav-dot:hover { cursor: pointer; background-color: rgba(0, 0, 0, 0.8);}input#img-1:checked ~ .nav-dots label#img-dot-1,input#img-2:checked ~ .nav-dots label#img-dot-2,input#img-3:checked ~ .nav-dots label#img-dot-3,input#img-4:checked ~ .nav-dots label#img-dot-4,input#img-5:checked ~ .nav-dots label#img-dot-5,input#img-6:checked ~ .nav-dots label#img-dot-6 { background: rgba(0, 0, 0, 0.8);}#mid_left { float:left; width:400px; }#mid_slider { position:relative; float: right; width: 440px; height: 220px; }#tooplate_middle img { float: right; margin-left: 60px; }#mid_left p { margin-bottom: 30px; color: #fff; } The image slider I wanted was more like the one at http://www.eaglegunusa.com/, but I couldn't find code on the net for it.

Hello, I recently used this code that I got from a working fade in slider on the internet. The only thing I've changed are the images, the rest has stayed the same. When I load up the site in Safari it doesn't slide or fade, it just shows one image the entire time. What am I doing wrong? Heres the code I used from the internet HTML <div class="fadein"> <img src="http://farm9.staticflickr.com/8359/8450229021_9d660578b4_n.jpg"> <img src="http://farm9.staticflickr.com/8510/8452880627_0e673b24d8_n.jpg"> <img src="http://farm9.staticflickr.com/8108/8456552856_a843b7a5e1_n.jpg"> <img src="http://farm9.staticflickr.com/8230/8457936603_f2c8f48691_n.jpg"> <img src="http://farm9.staticflickr.com/8329/8447290659_02c4765928_n.jpg"></div> CSS .fadein { position:relative; height:320px; width:320px;}.fadein img { position:absolute; left:0; top:0;} JS $('.fadein img:gt(0)').hide();setInterval(function () { $('.fadein :first-child').fadeOut() .next('img') .fadeIn() .end() .appendTo('.fadein');}, 4000); // 4 seconds

Hello internet. I have a simple image slider that works well. However I have not been able to get the images to fade in. Can anyone direct me to a good tutorial on JavaScript that may teach me how to incorporate image fading into my slider? Thanks.

I currently have a javascript slider in place. It's on autoplay at 5 seconds per slide. The second slide has an iframe youtube video.Unfortunately, if I click play, 5 seconds later, the slider autplays to the next slide.Is there any way to get the slider to recognize the video is playing, for example? Or are there any other ways around this that anyone can think of?The JS code is simple, I'm using http://jquery.malsup.com/cycle/ for my slider. <script type='text/javascript'> jQuery('#slider-1').cycle({ next: '#next-1', prev: '#prev-1', fx: 'fade', timeout: 30000000, pause: 1, pager: '#slider-nav-pager-1', height: '433px', width: '960px' })</script>If you need more code, let me know. It's just a simple iframe.Thanks!

Okay, unfortunately, I can't give you my website because it's on an internal stage server.Having said that, here's my issue.I'm adding content to a simple javascript slider. The images on slides 1,3, and 4 are perfect. The issue is slide 2. Slide 2 includes a video. There's an image as a background on this slide, but there's a video on the left side of it.Screenshot of How it SHOULD look.Screenshot of How it CURRENTLY looks.It's been difficult to place everything with CSS since it's all within the confines of a slider that's already affected by javascript.Also, the slider is on autoplay to change every 3-5 seconds. How do I make it so that the slider stops autoplaying if somebody clicks on the video? This way the video can finish playing before it goes to the next slide...The last issue I have is that when it DOES switch to the next slide, the video hangs out for just a moment until the animation is complete. In other words, the fade animation between slides doesn't affect the video and it stays until it's fully on the next slide...Any thoughts anyone might have would be very helpful... Thanks!Here's the JS from the slider: <script type='text/javascript'> jQuery('#slider-1').cycle({ next: '#next-1', prev: '#prev-1', fx: 'fade', timeout: 30000000, pause: 1, pager: '#slider-nav-pager-1', height: '433px', width: '960px' })</script>Here's the CSS:.slide-video { width: 930px; background: url('images/Slide2.jpg') no-repeat;}.slide-video-desc { width: 930px; top: -1%; position: relative; background: url('images/slider-desc-bg.png') no-repeat; overflow: hidden; background-size:960px 85px; height: 85px; font-family: 'tradegothic'; font-size: 22px; color: #F8F8F8; text-align: left; padding-bottom: 150px; line-height: .4em;}.slide-video-button { background: url("images/Whole_Button.png") no-repeat scroll left center #D1D1D1; background-size: 100% 100%; border-radius: 6px 6px 6px 6px; bottom: 45px; color: black; font-family: 'platin'; font-size: 18px; height: 45px; padding-right: 40px; padding-left: 15px; float: right; position: relative; text-decoration: none; line-height: 2.5em; right: 10px;}/*Slider Description*/.slide-desc { margin-top: -90px; width: 930px; padding: 5px 25px; position: relative; background: url('images/slider-desc-bg.png') no-repeat; overflow: hidden; background-size:960px 85px; height: 85px; font-family: 'tradegothic'; font-size: 22px; color: #F8F8F8; z-index: 2000; text-align: left;}.slide { font-famliy: 'tradegothic';}/*Slide Title*/.slide .slide-desc h2{ color: #F8F8F8; font-size:40px; margin: 5px 0 5px -5px; line-height: 0.7em; font-family: 'platin'; text-shadow:3px 3px 7px #181818;}/*Slide Button*/.demo-button { background: url("images/Whole_Button.png") no-repeat scroll left center #D1D1D1; background-size: 100% 100%; border-radius: 6px 6px 6px 6px; bottom: 17px; color: black; font-family: 'platin'; font-size: 18px; height: 45px; padding-right: 40px; padding-left: 15px; float: right; position: relative; text-decoration: none; line-height: 2.5em; right: 10px;}.demo-button a:hover { text-decoration: none;}.demo-button a:hover span { text-decoration: none;}.button-text { padding-left: 50px; padding-right: -10px;}a:link { text-decoration: none;}.slider{ margin: 0 auto; padding-top: 15px;}.entry-content .shadow-wrap { margin: 0 auto; padding-left: 15px; padding-top: 10px; width: 1000px;}#slider-1 .slide img { width: 960px; max-width: 100%; padding-top: 15px;}#slider-1 .slide-desc img { width: auto;}/*Slogan*/.slide-header { color: #D1D1D1; font-family: 'tradegothic'; font-size: 18px; padding: 5px 0 15px; text-align: left; padding-top: 10px;}#slider-nav-1 { bottom: 8px; margin: 0 auto; position: relative; width: 170px;}#slider-nav-pager-1 a{ background: url('images/unused.png') no-repeat; padding: 2px 5px; color: transparent; margin: 0 4px;}#slider-nav-pager-1 .activeSlide{ background: url('images/current.png') no-repeat;}#slider-nav-1 #next-1 { float:right; margin-left: 3px;}#slider-nav-1 #prev-1 { float:right; margin-right: 3px;}#slider-nav-1 #slider-nav-pager-1 { float:right;}Here's the html:<div class='slider' id='slider-1'><div class='slide'><div class='slide-header'>CleanTelligent is quality control software trusted to help build and preserve relationships.</div><img src="/wp-content/themes/cleantelligent/images/Slide1.jpg" alt="Slide 1" /><div class='slide-desc'><h2 style="font-family: 'platin';">Our Mission</h2>Innovating smarter solutions for building and preserving success.<a class="demo-button" title="Our Mission" href="https://www.cleantelligent.com/tour/"><span class="button-text">Take the Tour</span></a></div></div><div class='slide'><div class='slide-header'>CleanTelligent is quality control software trusted to help build and preserve relationships.</div><div class="slide-video"><iframe width="530" height="300" src="//www.youtube.com/embed/fa14mM1Zjhw" frameborder="0" allowfullscreen></iframe><div class="slide-video-desc"><img src="images/slider-desc-bg.png"><h2 style="font-size: 40px; font-family: 'platin'; color: #F8F8F8;">Why CleanTelligent?</h2>Find out why hundreds of BSC's and Facility Managers love CleanTelligent.<div class="slide-video-button"><a title="Why CleanTelligent?" href="https://www.cleantelligent.com/benefits"><span class="button-text">Explore Benefits</span></a></div></div></div></div><div class='slide'><div class='slide-header'>CleanTelligent is quality control software trusted to help build and preserve relationships.</div><img src="/wp-content/themes/cleantelligent/images/Slide3.jpg" alt="Slide 3" /><div class='slide-desc'><h2 style="font-family: 'platin';">Request a Demo</h2>Schedule a free, one-on-one web demo with one of our software consultants.<a class="demo-button" title="Request a Demo" href="https://www.cleantelligent.com/get-started/"><span class="button-text">Request a Demo</span></a></div></div><div class='slide'><div class='slide-header'>CleanTelligent is quality control software trusted to help build and preserve relationships.</div><img src="/wp-content/themes/cleantelligent/images/Slide4.jpg" alt="Slide 4" /><div class='slide-desc'><h2 style="font-family: 'platin';">Bidding and Estimating Module</h2>Increase revenus and successfully retain clients with impactful proposals.<a class="demo-button" title="Bidding and Estimating" href="https://www.cleantelligent.com/bidding-and-estimating-software/"><span class="button-text">More Information</span></a></div></div></div><!--END OF SLIDER CONTENT--><div class='shadow-wrap'><img class='shadow' alt="Slider Shadow" src='/wp-content/themes/cleantelligent/images/slider-shadow.png' /></div><div id='slider-nav-1'><a href="#" id="next-1"><img src='/wp-content/themes/cleantelligent/images/next.png' alt='next' /></a><div id='slider-nav-pager-1'></div><a href="#" id="prev-1"><img src='/wp-content/themes/cleantelligent/images/prev.png' alt='previous' /></a></div><script type='text/javascript'> jQuery('#slider-1').cycle({ next: '#next-1', prev: '#prev-1', fx: 'fade', timeout: 50000, pause: 1, pager: '#slider-nav-pager-1', height: '433px', width: '960px' })</script>

I have a simple, non-javascript slider. Just css and html, from what I can tell.I don't have much experience with javascript or jquery and most of it is very confusing to me.Having said that, is there any way to get my slider to autoplay? To switch from slide to slide every 3 seconds or so? I know it may well require JS or jQ, but if it does, I'm going to need some hand-holding here... :sThe website is www.cleantelligent.com. You can get the code there. Thanks so much for any help you can give!

Hello, it's been a while since I've posted in this forum, but I'm doing what I can to get a pre-existing jQuery plugin to work, and I'm currently pulling out all of my hair. The plugin itself works, I'm just unsure how to implement it. After including it, what html would I use to create the slider? A live version of the script can be viewed here: http://wptitans.com/majestics/ // JavaScript DocumentjQuery(function($){ $.fn.featureslider = function(options){ /* ================================================================================================ *//* ======================================== Plugin Options ======================================== *//* ================================================================================================ */var defaults = { time:4000, width:600, height:400, effect:'none', autoplay:false, listControls:true, callback:function(){ } }; var options = $.extend(defaults, options);/* ================================================================================================ *//* ==================================== Variables & Precaching ==================================== *//* ================================================================================================ */ return this.each(function() { var root = $(this).addClass('mainslider'); var parent = root.parent(); var li = root.find("li"); var images = li.find("img"); var pos,random_no,timer,image_timer,counter,arr,wait,index,block,w,h,src,parent,im,override=false,in_animation = false,controls,canvas,html5_flag=false,imageData,canvas,context,root_parent; var current = li.eq(1).toggleClass('active'),prev = li.first().addClass("reset"); var bool = true,first_bool = true; root.css({ width: options.width, height: options.height }); li.first().find("div.description").css("display","block"); li.first().fadeIn('slow'); current.hide(); if(options.listControls==true) appendControls(); /* ================================================================================================ *//* ======================================== Switcher Module ======================================= *//* ================================================================================================ */ function switcher() { if(current.prev().length>0) prev = current.prev(); else prev = li.last(); prev.removeClass("reset"); current.toggleClass("active reset"); if(current.next().length>0) // setting the next slide current = current.next(); else current = li.first(); current.hide(); current.addClass("active"); options.callback(); } /* ================================================================================================ *//* ================================= Effects Switching & Ending =================================== *//* ================================================================================================ */ function endeffect(image){ if(options.listControls==true) { controls.removeClass("control_active"); controls.eq(current.index()).addClass("control_active"); } clearInterval(timer); setTimeout(function(){ in_animation = false; if(override==false) // Return if manually triggered image_timer = setTimeout(function() { current.find("div.description").fadeOut('fast'); switcher(); effects(); },(options.time-800)); },1000); };function effects(){ if(li.is(":animated"))return; if(bool==true) { li.first().find("div.description").hide(); bool=false; first_bool = false; } switch(0) { case 0: current.find("div.description").fadeIn('normal'); current.fadeIn("slow",function(){ endeffect($(this)); });break; }}/* ================================================================================================ *//* ======================================== Control Options ======================================= *//* ================================================================================================ */ function appendControls() { var str = "<ul class='controls'>"; for(var i=0;i<li.length;i++) str = str + "<li>"+(i+1)+"</li>"; str = str+"</ul>"; root.after(str); controls = parent.find(".controls li"); controls.first().addClass("control_active"); controls.parent().css("left", 980/2 + 20 + controls.parent().width()/2 ) controls.bind({ click:function(){ setImage($(this).index()); }, mouseover:function(){ $(this).toggleClass("control_hover"); }, mouseout:function(){ $(this).toggleClass("control_hover"); } }); }/* ================================================================================================ *//* ======================================== Image Settings ======================================== *//* ================================================================================================ */ function setImage(index){ if(first_bool==true) { if(in_animation==true||current.index()-1==index) return; } else if(in_animation==true||current.index()==index) return; li.removeClass("reset active"); current.find("div.description").hide(); clearTimeout(image_timer); // Manual Override... if(first_bool==true) li.first().addClass("reset"); current.addClass("reset"); prev = current; current = li.eq(index).addClass("active"); override = true; effects(); } if(options.autoplay==true) image_timer = setTimeout(function() { effects(); },options.time); // Starting the Slideshow }); }; });

Hello everyone Please Can u help me why the news slider here in this page cannot work ?notice:It was working before adding the Banner rotator slider .I need an urgently solution http://www.al-awtadco.com/egyadmin/awtad/index.html