It's me again :) today am trying to develop a sliding divs with text navigation, i mean that i can edit the nav not only generated bullets. say that we have three divs containing images and text and i need to center a navigation menu of three different links.. also if you can help me in that, if the current slider is number 3 and I clicked on nav item number 1 I want it to jump to 1 without seeing 2 during the scrolling
here is the original code i need to learn how to develop it http://www.alfaromeo.co.uk/models/giulietta#dynamism
links to a similar article or any help in general would be very appreciated
.item--mobile .slider-item__wrap{height:300px;overflow:hidden}
.row-slide,.row-wrap{*zoom:1;clear:both;position:relative}
.row-slide:before,.row-slide:after,.row-wrap:before,.row-wrap:after{content:" ";display:table}
.row-slide:after,.row-wrap:after{clear:both}
.row-slide .content__text .animated-line,.row-wrap .content__text .animated-line{top:12px}
#media screen and (min-width:769px){.slider-menu{width:100%;font-size:0;position:absolute;right:0;bottom:42px;left:0;text-align:center;z-index:4}
.slider-menu>ul,.slider-menu>ul>li{display:inline-block}
.slider-menu>ul{padding:0;font-size:0;width:100%}
.slider-menu>ul>li{font:14px/14px "ApexNew-Medium",Helvetica,Arial,sans-serif;color:#000;background-color:#fff;text-transform:uppercase;letter-spacing:2px;padding-top:10px;padding-bottom:10px;border-right:1px solid #000;cursor:pointer;max-width:180px;width:100%;text-align:center}
.slider-menu>ul>li:first-child{position:relative}
.slider-menu>ul>li:first-child:before{content:"";width:90%;height:1px;position:absolute;bottom:5px;left:5%;background:#8f0c25}
.slider-menu>ul>li:last-child{border-right:0}
.slider-menu>ul>li.active{background-color:#8f0c25;color:#fff}
}
#media screen and (min-width:1366px){.slider-menu>ul>li{max-width:220px}
}
<div class="row-slide">
<div class="slider-item-wrap">
<div class="slide current">
images and text goes here 1
</div>
<div class="slide">
images and text goes here 2
</div>
<div class="slide">
images and text goes here 3
</div>
</div>
<div class="slider-menu">
<ul>
<li class="current"><a>link to slide 1</a></li>
<li><a>link to slide 2</a></li>
<li><a>link to slide 3</a></li>
</ul>
</div>
</div>
It looks like you want to develop a carousel.
There are several javascript and jQuery carousels, for example Slick and
jCarousel
It will be much easier to use a plugin or somebody else's solution for this. Download one of the examples and follow the site's instructions for how to integrate it into your own site.
Otherwise, use your browser's Developer Tools or script debugging feature to study the script for that site you pointed to. You can also study the code of jCarousel and Slick, for example, or any library.
Here is a very simple example of a custom carousel I threw together that you can study. It uses progressive enhancement and takes advantage of scrolling so that even without javascript users still get a decent experience and can flip through content. (Though you could easily tailor it to hide the scrollbar by swapping images instead, for example).
The main parts are: 1) styling so that only one content panel shows at a time, and 2) the logic to animate the sliding of the panels when user navigates.
$(".slider-menu a").on("click", function() {
var $current = $(".slide.current");
var $li = $(this).closest("li");
var idx = $li.index();
if (idx !== $current.index()) {
$(".slider-menu li.current").removeClass("current");
$li.addClass("current");
var $next = $(".slide").eq(idx);
$current.removeClass("current");
$next.addClass("current");
var $carousel = $(".slider-item-wrap");
var left = $carousel[0].scrollLeft + $next.position().left;
$carousel.animate({
scrollLeft: left
}, 500);
}
});
html,
body,
.row-slide,
.slider-item-wrap {
margin: 0;
border: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: "Segoe UI", Arial, sans-serif;
font-size: 0;
color: #fff;
overflow: hidden;
}
.row-slide {} .slider-item-wrap {
white-space: nowrap;
overflow: auto;
overflow-y: hidden;
}
.slide {
width: 100%;
height: 100%;
font-size: 24px;
display: inline-block;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.slider-menu {
position: absolute;
margin: 0 auto;
width: 100%;
margin: 0;
border: 0;
padding: 0;
bottom: 20px;
}
.slider-menu ul {
list-style: none;
overflow: auto;
margin: 0 auto;
border: 0;
padding: 20px;
text-align: center;
}
.slider-menu li {
padding: 4px 20px;
display: inline-block;
text-align: center;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
}
.slider-menu li:hover {
background-color: rgba(255, 255, 255, 0.7);
color: #222;
cursor: pointer;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.slider-menu li.current,
.slider-menu li.current:hover {
background-color: rgba(0, 0, 0, .2);
color: #333;
box-shadow: 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row-slide">
<div class="slider-item-wrap">
<div class="slide current red">
images and text goes here 1
</div>
<div class="slide blue">
images and text goes here 2
</div>
<div class="slide green">
images and text goes here 3
</div>
</div>
<div class="slider-menu">
<ul>
<li class="current"><a>link to slide 1</a>
</li>
<li><a>link to slide 2</a>
</li>
<li><a>link to slide 3</a>
</li>
</ul>
</div>
</div>
Related
I have a container that holds images of work. How do I use JS to bring up a button and some extra info on the image when I hover over it.
I tried using CSS and the hover tag but it would apply the effect I needed below the image, Not on top of it. The page is HTML, with CSS and the only JS code will be for this effect. The site is for my portfolio so each image is different but the class is all the same. The code below is what the original code is without the effect. If you could show me how to correctly do this I would really appreciate it, thanks.
I don't have the code I tried using before as I tried that many it felt pointless. I'll edit the question when I attempt another solution and post either the failed attempt or the successful attempt.
Here is a JSFiddle link
Welcome to StackOverflow!
So it seems like you only wanted to use the JavaScript as a fallback since you couldn't get the CSS to work. I would recommend against this as you may run into various compatibility issues between browsers and browser versions if you're not using a Polyfill.
To do this in CSS, I would recommend creating a container for each work item. In my example, I created a .item class and used that to contain the image and text. Once that was created, we can now look for a :hover on each .item and use that to modify the elements inside of our .item.
Let me know if you need me to clarify any part of my explanation or if I misunderstood any parts of your question.
.item {
width: 50%;
margin: 0 auto;
}
.wrapper {
text-align: center;
}
.work_container {
display: inline-block;
position: relative;
/* width: 1200px; Removed for testing */
height: 100%;
text-align: center;
}
.work_title {
display: inline-block;
width: 100%; /* Changed for testing */
height: 30px;
position: relative;
top: 30px;
font-family: 'Montserrat', sans-serif;
font-size: 28px;
font-weight: 500;
color: black; /* Changed for testing */
/* Used for the animation */
opacity: 0;
transition: 0.3s;
}
.work-hub {
width: 100%; /* Added for testing */
position: relative;
text-align: center;
margin-top: 50px;
margin-bottom: 50px;
-webkit-box-shadow: 0px 20px 36px -3px rgba(0, 0, 0, 0.34);
-moz-box-shadow: 0px 20px 36px -3px rgba(0, 0, 0, 0.34);
box-shadow: 0px 20px 36px -3px rgba(0, 0, 0, 0.34);
}
/* Run the hover on the container */
.item:hover .work_title {
opacity: 1;
}
<main>
<div class="wrapper">
<div class="work_container">
<div class="item">
<h1 class="work_title">Logo Visualisation</h1>
<img class="work-hub" src="https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg" alt="Work Image">
</div>
<div class="item">
<h1 class="work_title">Rock Banner</h1>
<img class="work-hub" src="https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg" alt="Work Image">
</div>
<div class="item">
<h1 class="work_title">Forest Fire</h1>
<img class="work-hub" src="https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg" alt="Work Image">
</div>
<div class="item">
<h1 class="work_title">Beach Body</h1>
<img class="work-hub" src="https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg" alt="Work Image">
</div>
</div>
</div>
</main>
I want to space out the contents to be evenly and then spaces to all have equal amount but I'm not sure how to do so. When I add padding to the list or increase the space in the column it messes up the format of the page
I have also tride putting an offset in the row but it still doesnt fix it
So I'm trying for it to be like:
Projects About Me Contact Me
Pic Pic Pic
But anytime I change something it changes to:
Projects Pic About Me Contact Me
Pic Pic
.header {
font-family: Cambria;
font-size: xx-large;
text-align: center;
padding: 50px;
background-color: lightblue;
background-image: linear-gradient(to bottom right, darkgray, lightblue);
}
.home {
width: 100%;
}
.home div {
width: 200px;
}
.home img {
vertical-align: middle;
border-style: none;
height: 200px;
width: 200px;
object-fit: cover;
}
.home ul {
display: inline-block;
list-style-type: none;
overflow: hidden;
}
.home li {
margin-left: 20px;
list-style: none;
float: left;
}
.home a {
text-decoration: none;
font-family: Cambria;
font-weight: lighter;
color: steelblue;
}
.home a:hover {
font-weight: bold;
color: darkblue;
}
.home img:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<body style="background-color:mintcream">
<div class="header">
<span style="color:darkblue">const</span>
<span style="color:white">_name =</span>
<span style="color:darkblue">"My_Name"</span>
</div>
<div class="row">
<ul class="home" style="padding-top:20px;">
<li class="col-md-3">
<a href="#">
<span style="font-size:35px">Projects</span>
<span><img src="https://via.placeholder.com/300.png/09f/fff"/
</span>
</a>
</li>
<li class="col-md-3">
<a href="#">
<span style="font-size:35px">About Me</span>
<div><img src="https://via.placeholder.com/300.png/09f/fff" /></div>
</a>
</li>
<li class="col-md-2">
<a href="#">
<span style="font-size:35px">Contact Me</span>
<div><img src="https://via.placeholder.com/300.png/09f/fff" /></div>
</a>
</li>
</ul>
</div>
</body>
As #apanesar11 pointed out, grids should resolve your problem.
Another solution is the use of the flexbox.
I made you and example with the snippet given by #mplungjan :
https://codepen.io/mdubus/pen/BvXXmJ
.home {
width: 100%;
display:flex;
flex-direction:row;
justify-content:space-around;
}
If you're not satisfied with the alignment, you can also replace the justify-content:space-around; in .home with justify-content:space-between;.
I'm not sure about the kind of alignment you want, but hope it helps ! :)
EDIT :
I also changed the .home a with
display:flex;
flex-direction:column; so that your picture goes under your text.
have you used grid systems? It'll make everything a lot easier to do and your webpage much more responsive. Check out some of my sample code here: https://github.com/apanesar11/CSS-Grids
The reason you're having this behavior currently is because span is an inline element, whereas div is a block element. Because of this the about.png and phone.jpg images are positioned currently, because start a new, since they are wrapped in a div element. Your project.jpg img is wrapped within a span element and span elements do not start on a new line and they take only the space they need.
I understand this seems to be a common request but after digging through several posts I can't find a solution and/or lack the knowledge to tailor the javascript to my needs.
I am looking for a way to have my Navbar stick to the top of the page once it reaches the top (scrolling far enough down). The issues I have is that my Navbar is currently positioned using flex, and not already at the top of the page.
CODEPEN
* {margin:0;padding:0;box-sizing:border-box}
html, body {text-align: center;}
#logo2 img {
margin: 0 auto;
margin-top: 3%;
}
.menu2 {
display: flex; /* displays children inline */
margin: 0;
width: 100%;
margin-top: 2%;
list-style-type: none;
background: linear-gradient(#3E3E3E, #2B2B2B);
}
li {
flex: 1; /* each takes as much width as it can, i.e. 25% */
border-right: 1px solid #232323;
}
li:last-child {
border: none;
}
li a {
display: block;
text-align: center;
font: Verdana;
font-size: 16px;
color: #EAE0D2;
text-decoration: none;
padding: 20px 0;
}
li a:hover {
background: linear-gradient(#404040, #3E3E3E);
}
.active {
background: linear-gradient(#2B2B2B, #232323);
}
<header id="logo2">
<img src="logo.png" alt="Logo"/>
</header>
<nav>
<ul id="navigation" class="menu2">
<li>HOME</li>
<li class="active">GALLERY</li>
<li>ART</li>
<li>CONTACT</li>
</ul>
</nav>
</body>
Well I eventually found an answer to my question. For those of you interested.
JS
var num = 240; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menu2').addClass('fixed');
$('.main').addClass('main2');
} else {
$('.menu2').removeClass('fixed');
$('.main').removeClass('main2');
}
});
.menu2 {
width: 100%; height: 100%;
background-color: rgb(240, 240, 240);
position: sticky;
left: 0; top: 0;
}
.emptySpace {width: 100%; height: 1000000px;}
<span class="menu2">
Link 1
Link 2
Link 3
Link 4
Link 5
</span>
<!-- the div below is to allow you to scroll so you can see how it works (it's absolutely useless) -->
<div class="emptySpace"></div>
If I'm understanding your question correctly, you can use
HTML:
<span class="menu2">
Link 1
Link 2
Link 3
</span>
CSS:
.menu2 {position: sticky;}
This will cause the navigation bar to stick to the top of the screen as the user scrolls down.
You can read into this a bit more at W3Schools.
Also, check out my Weave at LiveWeave.
friends there is something that I want to do for a week with cycle 2 slideshow plugin but I failed every time let me tell you What I want to do I'm trying to do categorized slideshow.I have filters on my cycle2 carousel (you will see on example)
I have 3 categories (or more than 3)
<ul class="filter">
<li id="sports">Sports</li>
<li id="naturel">Naturel</li>
<li id="animals">Animals</li>
</ul>
and my each li has an id
id#sports,id#naturel,id#animals,id#blabla..
at the same time my image has data-id attribute
data-id="sports",data-id="naturel",data-id="animals",data-id="blabla.."
and at this point I can not do what I want to do.
if I click li#sports than only data-id="sports" img must be appear on slideshow with thumbnail
or if I click li#animals than only data-id="animals" img must be appear on slideshow with thumbnail
I try with jquery but nothing happend
and please click to see my little project on codepen
$(document).ready(function() {
$(".filter li").on("click", function() {
var activeId = $(this).attr("id");
$("img[data-id]").hide();
$("img[data-id = '" + activeId + "']").show();
});
});
.single-gallery{
width:800px;
overflow:hidden;
position:relative;
}
.cycle-slideshow img {
width:100%;
height:234px;
max-width:100%;
}
#single-pager a img {
width: 49.3px !important;
height:49.3px !important;
border: 1px solid #fff;
}
#single-pager a.cycle-pager-active img {
opacity: 0.4;
}
#single-left,
#single-right {
position: absolute;
top: 50%;
z-index: 1000;
background: rgba(255, 255, 255, .8);
padding: 12px;
cursor: pointer;
}
#single-left {
left: 0;
}
#single-right {
right: 0;
}
.filter {
position: absolute;
z-index: 1000;
right: 0;
top:0;
padding: 0;
color: #FFF;
background: rgba(255, 255, 255, 0.6);
padding: 10px 30px;
}
.filter li {
list-style-type:none;
cursor: pointer;
display: inline-block;
background: rgba(0, 0, 0, .6);
padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
<div class="single-gallery">
<div class="cycle-slideshow" data-cycle-pager="#single-pager" data-cycle-pager-template="<a href='#'><img src='{{src}}' width=48 height=48></a>" data-cycle-prev="#single-left" data-cycle-next="#single-right" data-cycle-pause-on-hover="true">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg" data-id="sports">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/sunny-day-lightbox.jpg" data-id="naturel">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-id="animals">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/sakura%20trees-lightbox.jpg" data-id="animals" />
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" data-id="animals" />
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" data-id="animals" />
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" data-id="sports" />
<div id="single-pager" class="center external"></div>
<div id="single-next-prev">
<span id="single-left">Prev</span>
<span id="single-right">Next</span>
</div>
</div>
<ul class="filter">
<li id="sports">Sports</li>
<li id="naturel">Naturel</li>
<li id="animals">Animals</li>
</ul>
</div>
Even though you are setting display: none on the elements you want hidden (using .hide()) the plugin is still setting them to display: block because when you initialize the slider they are all eligible slides.
There doesn't seem to be a very easy way of dynamically removing/adding slides on the fly.
The approach I took was setting data-hidden="true" on the slides you want hidden, then re-initializing the slider to only use images that match img[data-hidden="false"] as slides.
I added the code below to your css so that the hidden slides don't show up below the slideshow.
img[data-hidden="true"]{
display: none;
}
I also took all the other data- attributes in the cycle div, and renamed its class to mySlideShow so I could render the cycle when I needed using the $('.mySlideShow').cycle({...}) method.
Here should be a working example: http://codepen.io/anon/pen/dvoLeE
i am working on a mock up site with some functionality. i am working with html css and js. i am using the cycle plugin to cycle through some tabs that i have made up. ill post my code then explain what i am trying to do:
my html:
<div id="content">
<div id="image_selector" class="image_selector">
<div class ="image">
<ul>
<li><a id="Mpowered" href="">Mpowered</a></li>
<li><a id="Technology" href="">Technology</a></li>
<li><a id="Consulting" href="">Consulting</a></li>
<li><a id="Outsourcing" href="">Outsourcing</a></li>
</ul>
</div>
</div>
<div class="cell">
<div class="description">
<img id="demoimg" src="/home/***/HTML/launch_pad/images/productivity.png" alt="demo pic"/>
<h2>Who are we?</h2>
<p> a consulting company... ect</p>
</div>
<div class="description">
<img id="demoimg" src="/home/***/HTML/launch_pad/images/tech1.jpg" alt="tech"/>
<h2>We have the tech!</h2>
<p> lots of tech!!.... ect</p>
</div>
... there are two more description sections one for each of the "a" tags i have now made as tabs.
the css looks like this:
.image_selector {
border: 1px dotted green;
height: 130px;
}
.image li {
float: left;
border: 1px solid white;
height: 100px;
width: 103px;
margin-left: 86px;
overflow: hidden;
text-align: center;
}
.image li a {
padding: 74px 0px 0px 0px;
color: white;
text-shadow: 0 0 0.6em #0197E8;
font-size: 17px;
letter-spacing: 1px;
text-decoration: none;
display: block;
height: 80px;
background-repeat: no-repeat;
}
.image li a:hover {
text-shadow: 0 0 0.6em #0197E8, 0 0 0.4em #0197E8, 0 0 0.6em #0197E8;
}
.image li #Mpowered {
background-image: url('/home/ruberto/HTML/launch_pad/images/mpower.png');
background-position: center top;
}
.image li #Technology {
background-image: url('/home/ruberto/HTML/launch_pad/images/tech.png');
background-position: center top;
}
.image li #Consulting {
background-image: url('/home/ruberto/HTML/launch_pad/images/consulting.png');
background-position: center top;
}
.image li #Outsourcing {
background-image: url('/home/ruberto/HTML/launch_pad/images/outsourcing.png');
background-position: center top;
}
.cell {
border: 1px dashed green;
height: 318px;
width: 715px;
float: left;
}
#demoimg {
float: left;
position: static;
margin: 16px 8px 0px 0px;
height: 200px;
width: 200px;
}
and the javascript iam using:
$('.cell')
.before('<div class="image">')
.cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager: '.image'
});
so i have read up on line and now understand that the pager option will now create its own navigational section just above the div that has the content that i want to rotate through. i was wondering is there a way i can just reference the "image" tag i have set up as my "tabs" for the navigational function for the cell class??
if there is no way can anyone recommend something that could work in its place?
Assuming you want to reference or even map those li's to other functionality or even build another referencable pager, which what it sounds like you might need to do, you're probably going to need .index to provide a reference for those pair connections.
To start a duplicate pager, clone those elements somewhere else, then maybe simply use css to not display the original, BUT leave it in place so that cycle can use it for paging
// create secondary menu
$('#pager').find('li').clone().appendTo('#navpage ul');
Then if you want to pair your two pagers start with this functionality
http://jsfiddle.net/moneylotion/KhL3W/