Here's hoping someone know how to do this. I am new to programming and haven't been able to figure it out or find the answer anywhere else. What i am trying to do is add a secondary control to an existing tabbed slideshow. The secondary control will be linked bullets that become active and inactive just like the existing links do as the slideshow plays and on click.
You can see an example of what I have here http://jsfiddle.net/j08691/ZSPX3/1/. The jquery code follows. Thanks in advance for any help.
var HM = {
//tab
jqs_slideList: '.slideList',
jqs_tabList: '.slides .carouselLinks',
init: function() {
//init sliders
var aSliders = $(this.jqs_slideList);
if (aSliders.length > 0) {
this.slideShow(aSliders);
}
//init the carousels that are lists of links
$('.carousel.icons').hellmannsCrsl({
rotateSpeed: 5000,
viewport: '.carouselLinks'
});
},
slideShow: function(eSlideListParam) {
var slideList = eSlideListParam,
slides = slideList.find('li'),
tabList = slideList.siblings('.carouselLinks'),
tabs = tabList.find('li'),
speed = 500;
tabs.on('click', 'a', function(e) {
$(this).trigger('slides.swap');
e.preventDefault();
});
//make it automatic, but this doesn't work properly, I'm stuck...
setInterval(function() {
var current = parseInt($('li.selected a').data('links-to').split('_')[1],10);
var idx=current-1;
var max = $('.carouselLinks li a').length;
idx = (current<max) ? (idx+1):0;
$('a:eq('+idx+')').trigger('click');
}, 3000);
/**
* This is where the animation, i.e. fade, is performing.
* I find it quite convenient to use bind/trigger principle as it's easier to maintain
*/
tabs.find('a').bind('slides.swap', function() {
var self = $(this),
selfIndex = self.parent().index(),
targetSlide = slides.eq(selfIndex);
//fade in/out slides
slides.filter('.active').stop(true, false).fadeOut(speed, function() {
$(this).removeClass('active');
});
targetSlide.stop(true, false).fadeIn(speed).addClass('active');
tabs.removeClass('selected');
self.parent().addClass('selected');
});
}
};
HM.init();
Here's a Fiddle
HTML
<!-- bullet ctrl -->
<div class="bulletLinks">
<ul>
<li><a data-links-to="slide_1" href="#">1</a></li>
<li class="selected"><a data-links-to="slide_2" href="#">2</a></li>
<li><a data-links-to="slide_3" href="#">3</a></li>
<li><a data-links-to="slide_4" href="#">4</a></li>
</ul>
</div>
<!-- /bullet ctrl -->
CSS
.bulletLinks a {
background: #900; // Or bullet background image
display: block;
float: left;
width: 20px;
height: 20px;
margin-right: 7px;
text-align: center;
text-decoration: none;
color: #fff;
border-radius: 50%;
transition: all 0.2s linear;
}
.bulletLinks a:hover {
background: #999;
color: #fff;
}
jQuery Code edits
tabList = slideList.siblings('.carouselLinks, .bulletLinks'),
Related
I have a code to make bs nav, but I don't understand how to make submenu always open without clicking menu name.
This is the code:
http://jsfiddle.net/6hrmodok/2/
and please answer this question with the new code.
To make the submenu always open in bootstrap navbar, you just need to add a class "open" like this <li class="dropdown open"> this will make your bootstrap's navbar submenu always open and it will toggle also.
.gw-nav-list>li.always-active>a,
.gw-nav-list>li.always-active>a:hover,
.gw-nav-list>li.always-active>a:focus,
.gw-nav-list>li.always-active>a:active {
background-color: #fff;
color: #2574A9;
font-weight: bold;
font-size: 13px;
}
.gw-nav-list>li.always-active:before {
display: inline-block;
content: "";
position: absolute;
left: 0px;
top: -1px;
bottom: 0;
z-index: 1;
border: 2px solid #2574A9;
border-width: 0 0 0 5px;
}
.always-active .gw-submenu,
.gw-nav-list>li.always-active .gw-submenu {
display:block;
}
And for JavaScript;
$('.gw-nav > li:not(.always-active) > a').click(function () {
....
Updated fiddle
you can open the submenu on page load with simple jquery code as below in your script file.
var pageload = function()
{
$(".gw-nav > li").each(function ()
{
var checkElement = $(this);
var ulDom = checkElement.find('.gw-submenu')[0];
if (ulDom != undefined) {
checkElement.addClass('active');
checkElement.find('ul').slideDown(300);
return;
}
});
}();
check the fiddler here.
http://jsfiddle.net/o1jw4txg/
I have searched several posts but cannot find something similar to what I need to do, or what I have found I cannot get to work - pretty sure that is just me though!
So, there are 3 links on a page. When a link is clicked it should display the photo (on the same page) with an overlay applied to it. I can get the image to open but for the life of me cannot figure out how to get the overlays to attach. When the image opens it should stay on the same page (with the links visible through the overlay). The user should be able to click a close button or the image itself to go back to the links display.
I know the code is a mess as I've been trying anything I can think of to try and get this to work, since I'm currently stuck on getting everything to display properly and have not even gotten to the close function yet if someone can give me a hint I would really appreciate it.
Thanks!
HTML
<!doctype html>
<html>
<head>
<title> Image preview </title>
<meta charset="utf-8">
<link rel="stylesheet" href="preview.css">
<script src="preview.js"></script>
<script>
window.onload = function() {
Preview.init();
};
</script>
</head>
<body>
<ul>
<li><a href="https://courses.oreillyschool.com/advancedjavascript
/homework/images/image1.jpg" data-preview="image1">Mt. Rainier,
1</a></li>
<li><a href="https://courses.oreillyschool.com/advancedjavascript
/homework/images/image2.jpg" data-preview="image2">Mt. Rainier,
2</a></li>
<li><a href="https://courses.oreillyschool.com/advancedjavascript
/homework/images/image3.jpg" data-preview="image3">Mt. Rainier,
3</a></li>
</ul>
</body>
</html>
CSS
.previewOverlay {
position: absolute;
display: none;
top: 0px;
left: 0px;
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
height: 100%;
}
.previewOverlay img {
position: relative;
border: 20px solid white;
border-radius: 10px;
top: 50px;
left: 50px;
}
.close {
position: absolute;
top: 0px;
left: 0px;
color: #fdfdfd;
font-size: 50px;
text-shadow: 0px 0px 5px black;
}
.close:after {
content: "\2717";
}
.close:hover {
color: orange;
}
JavaScript
function Preview () {
var mtnPics = document.querySelectorAll("a");
console.log(mtnPics);
mtnPics.addEventListener("click", function(event) {
event.preventDefault()
});
for (var i = 0; i < mtnPics.length; i++) {
mtnPics[i].onclick = showPicture;
}
function showPicture (pictureURL) {
var picPicked = document.getElementById("a").value;
console.log(picPicked);
//Create Div's for image display.
var ul = document.getElementById("ul");
var picDiv = document.createElement("div");
picDiv.setAttribute("class", "previewOverlay");
var imgDiv = document.createElement("div");
imgDiv.setAttribute("class", "previewOverlay img");
var imgSelected = document.getElementById("a").value;
console.log(imgSelected);
imgDiv.src = imgSelected;
var buttonClose = document.createElement("button");
//Assign divs and buttons
buttonClose = document.setAttribute("class", "close");
ul.appendChild(imgDiv);
imgDiv.appendChild(pictureURL);
imgDiv.appendChild(buttonClose);
picDiv.appendChild(imgDiv);
picDiv.insertBefore(ul, picDiv.firstChild);
//document.body.appendChild(picDiv);
buttonClose.onclick = closePicture;
}
function closePicture(targetURL) {
document.removeElement('picDiv');
}
}
I am trying to make an interactive web page with the css part and javascript separated from the html document.
sandbox.html (part of it):
<body>
<nav class="unify-bg">
<ul>
<li><a id="ipsum" style="top:-90px">Ipsum</a></li>
</ul>
</nav>
</body>
sandbox.css (part of it):
nav li a{
float:left;
margin: 0 5px;
color: #e4b05c;
color: white;
font-weight: bold;
width: 120px;
height: 100px;
background-color:#e4b05c;
position: relative;
top:-90px;
}
sandbox.js (part of it):
window.onload = function () {
document.getElementById("ipsum").addEventListener("mouseover", function () {
ipsum = this;
var t = setInterval(function () {
move(ipsum, t);
}, 10);
}, false);
}
function move(element, interval) {
var pos = element.style.top.replace("px", "");
if (pos > -10) clearInterval(interval);
else {
pos = parseInt(pos) + 10;
element.style.top = pos + "px";
}
}
somehow if I remove the inline style "top:-90px" from the list element (since the style is already in the *.css anyway), the javascript stops working. Can anyone explain why please and help me solve the problem? Thank you!
element.style only returns inline styles. Hence, without an inline top, it is an empty string,
If you want all applied styles, use getComputedStyle: window.getComputedStyle(element).top.
Related to my question seen here: Keeping list inline with text while keeping list vertically positioned
Having trouble cycling through a list using js while keeping the list in-line with some text. Floating the text left solves the problem, until i have to format and center the text/list.
what i have so far: http://jsfiddle.net/pthbK/
trying to achieve something similar to: https://www.youeye.com/
The list appends up for some reason, causing the text to appear slightly below the list. Goal is to get list appearing directly beside the list (to the left in my case).
<center>
<div id = "text">Sometext </div>
<ul id = "ticker">
<li>3</li>
<li>2</li>
<li>1</li>
</ul>
#ticker {
height: 40px;
overflow: hidden;
list-style-type: none;
list-style-position: oustide;
padding: 0;
display:inline-block;
}
#ticker li {
height: 40px;
}
#text {
display: inline;
}
function tick(){
$('#ticker li:first').animate({'opacity':0}, 200, function () { $(this).appendTo($('#ticker')).css('opacity', 1); });
}
setInterval(function(){ tick () }, 4000);
HTML:
<div class="center">You ate an <span id="text"></span>.</div>
JavaScript:
var i = 0,
texts = ['apple', 'banana', 'orange'];
function cycleText() {
$("#text").text(texts[i]);
if ((i += 1) === texts.length) {
i = 0;
}
}
cycleText();
setInterval(cycleText, 1000);
FIDDLE
How can I make the carousel center the item I've clicked to the middle? I've looked everywhere for an answer but they're not straight answers... Can someone help me in this, please?
This is what I've done so far: http://jsfiddle.net/sp9Jv/
HTML:
<div id="wrapper">
<div id="carousel">
prev
next
<div class="viewport">
<ul>
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
<li>Quatre</li>
<li>Cinq</li>
<li>Six</li>
<li>Sept</li>
<li>Huit</li>
</ul>
</div>
<!-- viewport -->
</div>
<!-- carousel -->
</div>
<!-- wrapper -->
JavaScript:
var carousel = $('#carousel'),
prev = carousel.find('.prev'),
next = carousel.find('.next'),
viewport = carousel.find('.viewport'),
item = viewport.find('li'),
itemWidth = item.outerWidth(true),
itemNum = item.length,
itemList = viewport.find('ul');
itemList.width(itemWidth * itemNum);
var moveCarousel = function(dir) {
itemList.animate({ left: '-=' + (itemWidth * dir) + 'px' }, 400);
};
//prev
prev.on('click', function(e) {
e.preventDefault();
moveCarousel(-1);
});
//next
next.on('click', function(e) {
e.preventDefault();
moveCarousel(1);
});
//carousel item
item.on('click', 'a', function(e) {
var self = $(this),
selfIndex = self.index(),
distance = itemList.width() / 2,
selfPos = self.position(),
selfPosLeft = selfPos.left,
viewportPosLeft = viewport.position().left;
e.preventDefault();
//move item to middle, but it doesn't work...
if (selfPosLeft > Math.floor(viewport.width())/3) {
itemList.animate({ left: '-' + Math.floor(viewport.width())/3 + 'px' }, 400);
}
if (selfPosLeft < Math.floor(viewport.width())/3) {
itemList.animate({ left: Math.floor(viewport.width())/3 + 'px' }, 400);
}
});
CSS:
#wrapper {
width: 500px;
margin: 20px auto;
}
#carousel {
position: relative;
}
.viewport {
width: 260px;
border: 1px solid #6e6e6e;
height: 80px;
overflow: hidden;
position: relative;
margin-left: 100px;
}
.prev, .next {
position: absolute;
}
.prev {
top: 20px;
left: 0;
}
.next {
top: 20px;
right: 0;
}
.viewport ul {
position: absolute;
}
.viewport li {
float: left;
margin-right: 10px;
}
.viewport li a {
display: block;
width: 80px;
height: 80px;
background: #ddd;
}
While you have prepared all the information needed about all items, you can calculate the value of the left based on the clicked item.
Here is my modification:
and I've bound the click action of carousel items with this function and passed the clicked item using the self keyword.
var itemClicked=function(item){
var itemIndex=$(item).index(),
newLeft=(itemIndex*itemWidth*-1)+Math.floor(($(viewport).width()/itemWidth)/2)*itemWidth;
$(itemList).animate({left:newLeft+"px"},400);
};
You can check it working on this url: http://jsfiddle.net/rUZHg/3/
I assume that this should work despite of the number of viewed elements while it calculates the padding between the left 0 and the left of the center element.
Alright, it's ugly, I hope it gives you some ideas.
I created a global currentItem that tracks what's in the center. Every time the carousel moves this is updated.
The very useful variable I found was selfPosLeft which told me what was being clicked. I should add that 90 was the multiple I got from clicking around. Must be linked to your CSS and I don't know how to find this number dynamically.
Please try it :) http://jsfiddle.net/sp9Jv/4/
Well, I'm picturing that when you have more than 3 items you can change the code to compute the difference between the current item and the selfPosLeft of the clicked one, I'll leave that to you :) Like this, seems to work. http://jsfiddle.net/sp9Jv/5/