I tried to create a carousel as follows. But I couldn't make it work. I also tried to use Center Mode in the slick carousel. But it only applies to the slide in the middle. If there is a method or library that can enlarge the first slide in this way, please indicate. thank you.
You can maybe look into adding an "active" class to an element of the slide - so then you can apply appropriate CSS to the active class and it will only affect the active element. This means that one of the images will be "active" and you can do whatever to it, and when it slides another will become "active" and inherit the properties, whilst the one from before will lose them.
https://www.w3schools.com/howto/howto_js_active_element.asp
Independed of your actual slide usecase you can target the first element among a group of siblings with the css :first-child pseudo class (see https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child).
Ive added a simple example of how to use it.
To transfer it to your swiper you will have to apply the :first-child pseudo class to the class wrapping your individual slides.
.wrapper {
display: flex;
}
.entry {
font-size: 15px;
}
.entry:first-child {
font-size: 20px;
}
<div class="wrapper">
<div class="entry">Entry</div>
<div class="entry">Entry</div>
<div class="entry">Entry</div>
<div class="entry">Entry</div>
</div>
You can achieve this design through these codes:
for the first image
.slick-slide.slick-current.slick-active {
.your class {
width: 100%;
}
}
for the following images
.slick-slide.slick-active {
.your class {
width: 80%;
}
}
you can add first-child if you like to design specific class
Related
I have an img on the page with class .ff-og-image-inserted. I need a script to insert an other class .container-closed to hide part of this image with class .ff-og-image-inserted
What i've tried:
$(".ff-og-image-inserted").addClass("container-closed");
.ff-og-image-inserted {
overflow: auto;
height: auto;
}
.ff-og-image-inserted>container-closed {
overflow: hidden;
width: 470px;
height: 80px;
background-color: black;
}
<div><img src="link.jpg" class="ff-og-image-inserted" /></div>
My question:
Why this code is not working? I understand that there might be other solutions but i really need to know first of all why this solution is not working so please suggestions related to this solution and not other solutions.
More info: i can see that the image gets the class .container-closed but the css is not applied at all. I want to add class to the image itself because the parent div of the image has no class or id and i can't change that since these are automated posted images.
Thnx
You're using the > selector, which means 'direct descendent (reference)' :
.ff-og-image-inserted > container-closed {
It should simply be:
.ff-og-image-inserted.container-closed {
As you want to apply the overflow attribute to the parent container, not the image itself.
//
What OP wanted was add a class to the img's parent instead:
$('.ff-og-image-inserted').parent().addClass('container-closed');
I'm working on a site that has all of its pages basically "slide" around on the main landing page. So you basically start on a div with an ID of "main" that also has a class of "currentpage." If you click a nav menu item, the content slides away, and the next page's content slides into place. This new content's primary div would have a new id (let's say #about), and now the "currentpage" class is added to this div as well.
The thing is, the body tag has a background-image attached to it (it used to have a full screen video, but I set that to hide, and then there's this bg image behind it). I'd like to change the background image depending on which "page" you are on. At first, I set it up so that #about had a background-image set up, and so forth for the rest of the page IDs. The thing about this is that the content of the primary div is padded a whole bunch, so you would see the specified #about background image, but then you'd actually also still see that original image from the body tag behind it.
Thus, I'd like to change the actual body tag's background image property depending on which ID you're on.
I figured some means of checking if you're on a specified ID, as well as if the class for that div is set to "currentpage" would be step 1, with step 2 then changing the background image if that condition is true.
Here is what I have tried so far, to no avail:
Attempt 1:
if ($this.is('#about')) {
$('.bgimage').css({"background":"url(imageurlhere)"});
}
This didn't do anything.
Next, I found this old SO thread and tried to modify it just to see it in action to know if I was on the right path. Here's what I used:
Attempt 2:
if ($("#about").hasClass("currentpage")) {
$('#about').css({"background-color":"red"});
}
Unfortunately, this also didn't cause anything differently) when I went to About.
And yes, I had cleared cache out each time, and manually even went to the JS file to ensure it had the new code blocks each time.
Edit
Here is the basic page format:
<body class="video">
<div class="preload">Whole lot of stuff in here for a preload overlay</div>
<nav>Nav is here</nav>
<main>
<div id="pt-main" class="pt-perspective ">
<div class="page-1 currentpage" id="main"></div>
<div class="page-2" id="about"></div>
<div class="page-3" id="services"></div>
<div class="page-4" id="portfolio"></div>
<div class="page-5" id="contact"></div>
</div>
</main>
The "currentpage" class will go to a different div if the corresponding link in the nav is clicked. So, click About in the nav, currentpage class drops from #main and ends up in same div as #about
And then the CSS for the body tag is as follows:
.video {
background: url(../img/video_bg.jpg);
background-size: cover;
}
I basically want to make it so that background (image) of .video changes when you end up on #about, #services, #portfolio, etc.
TL;DR
Can anyone help me with this code block? How do I check if an div with a specific ID also has a class, and then modify the .bgimage CSS to change its background?
Edit 2:
I came up with a workaround for this. Here's what I did:
1) I set the overall background color to #000, removed the original bg-image altogether, and actually restored a full-screen video I'd previously hid
2) I edited each nav menu item to have a hidevid class, except for the Home link, which I made showvid
3) I created CSS for each "page" ID (ie #about {background-image: url(image);}
4) I created a new CSS class: .hidethis {display: none;}
5) I then implemented the following jquery:
$(document).ready(function(){
$(".hidevid").click(function(){
$("video").addClass("hidethis");
});
$(".showvid").click(function(){
$("video").removeClass("hidethis");
});
});
What this does is set the background to black, but that's not seen on the landing ("home") page, just the video. However, clicking a nav menu item will "slide" the next "page" into view, displaying its background image and changing the video to have a display: none property, basically hiding it and the extra content (the nav) just has a black background behind it.
Using vanilla JavaScript (pure JavaScript), you can check if a div has a particular class name and based on the results, change the css by doing this:
var x = document.getElementById('about');
var y = document.querySelector('.bgimage');
if (x.classList.contains('currentpage')){ // if #about has "currentpage" class, run the following
x.style.background = 'red'; //change background-color of #about to red
y.style.background = 'url(imageurlhere)'; // change background-image of .bgimage
}
jsFiddle: http://jsfiddle.net/AndrewL64/nqjypevh/10/
your codes is wrong. true usage is this.
css('background-color','red')
I came up with a workaround for this. Here's what I did:
1) I set the overall background color to #000, removed the original bg-image altogether, and actually restored a full-screen video I'd previously hid
2) I edited each nav menu item to have a hidevid class, except for the Home link, which I made showvid
3) I created CSS for each "page" ID (ie #about {background-image: url(image);}
4) I created a new CSS class: .hidethis {display: none;}
5) I then implemented the following jquery:
$(document).ready(function(){
$(".hidevid").click(function(){
$("video").addClass("hidethis");
});
$(".showvid").click(function(){
$("video").removeClass("hidethis");
});
});
What this does is set the background to black, but that's not seen on the landing ("home") page, just the video. However, clicking a nav menu item will "slide" the next "page" into view, displaying its background image and changing the video to have a display: none property, basically hiding it and the extra content (the nav) just has a black background behind it.
I’m making a whole lot of assumptions and guesses. You only showed one css class. From the description it sounds like the problem is actually using CSS to cover the background, and that if it weren’t for that, there would be no need to change the class on the body. The basic solution, move the initial background from the body to the #main div, move the padding to the .page-1, .page-2 etc. divs. Also, if the background images are transparent also give a background-color.
I’m assuming the nav does not have a background image and stays put. I’m also assuming you already have the sliding of the sections in place, I didn’t show that but instead just a simple display none/block just to keep it simple. I also didn’t show the js (but you shouldn’t need to change the body class.) I also left the html alone.
body {
margin: 0;
height: 100%;
}
nav {
height: 50px;
background-color: #ccc;
}
main {
background-image: url(https://picsum.photos/200/300?image=0);
background-size: cover;
}
.pt-perspective > div {
height: calc(100vh - 50px);
padding: 50px;
background-repeat: no-repeat;
background-color: aqua;
background-size: cover;
background-image: url(https://picsum.photos/200/300?image=0);
display: none; /* or positioned off screen, wherever you already have it */
}
.pt-perspective .currentpage {
display: block;
}
.pt-perspective .page-1 {
background-image: url(https://picsum.photos/800?image=1);
}
.pt-perspective .page-2 {
background-image: url(https://picsum.photos/800?image=2);
}
.pt-perspective .page-3 {
background-image: url(https://picsum.photos/800?image3);
}
.pt-perspective .page-4 {
background-image: url(https://picsum.photos/800?image=4);
}
.pt-perspective .page-5 {
background-image: url(https://picsum.photos/600?image=5);
}
<body class="video">
<!-- <div class="preload">Whole lot of stuff in here for a preload overlay</div> -->
<nav>Nav is here</nav>
<main>
<div id="pt-main" class="pt-perspective ">
<div class="page-1 currentpage" id="main"></div>
<div class="page-2" id="about"></div>
<div class="page-3" id="services"></div>
<div class="page-4" id="portfolio"></div>
<div class="page-5" id="contact"></div>
</div>
</main>
as described in the title I would like to add a class to the parent element of one element if I have several of the parents.
To explain it in more detail what I mean, I'll give you a quick overview of the initial situation.
The markup:
<div class="box">
<h3>Title</h3>
<p>Some text</p>
<span class="iconfont more"></span>
<div class="slide">
<p>some more text</p>
<span class="iconfont close"></span>
</div>
</div>
As you see I've created a div "box" with some content, a span and also another div "slide" with some content and a span too.
The CSS:
.box {
width: 300px;
height: 500px;
position: relative;
}
.slide {
width: 300px;
height: 500px;
position: absolute;
top: -500px;
left: 0;
transition: all 500 ease-in-out
}
Let's add a bit of styling. The divs now have a width, height and position plus the slide box has received a transition to make the hole thing smooth. You may already know where the journey will end.
So let's do it by bringing up a new player:
.box.slided .slide {
top: 0;
}
For now the rest is pure routine. Add/remove the class .slided to .box by clicking the span. It works fantastic and everyone is happy except me. Because what if I have more of these boxes? Of course using IDs instead of classes to make them unique will solve this too. But what if I don't know how many of them I'll have? And that's exactly the point.
How can I add or remove the class .slided to exact this div.box that contains the span I'm clicking on?
Thanks for your help
Edit: code I've tried
$('div span').stop().click(function(event) {
$('box').addClass('slided');
});
Use $(this) and closest() to traverse the DOM in a relative fashion:
$('.more').click(function () {
$(this).closest('.box').toggleClass('slid');
});
Demo
Note that I've added a negative z-index to your slider div to prevent it from covering the 'more' link, rendering it inaccessible. This is probably not a viable production solution.
Here's an updated version with the transition working properly.
You can find your closest parent that matches your selector like this:
$('div span').stop().click(function(event) {
$(this).closest('.box').addClass('slided');
});
This code will now find its box parent in the context of the span that was clicked.
I am creating some design part in HTML. I have two div. Both div element are generating through java script. First div has a class and second div has no any class or id. I want to apply style to second div.
<div class="class_name"></div>
<div style="display:block;"></div>
After applying style the second div style will be style="display:none;"
Please suggest.
You can have CSS only solution for this, there is no need to have a javscript for this you can try adjacent siblings selectors of CSS:
To target very next div you need this:
.FirstClassName + div{
/*your style goes here */
}
To target all divs in a parent after a given class name:
.FirstClassName ~ div{
/*your style goes here */
}
Demo
You can use :not selector for the second div:
div:not([class="classname_of_the_first_div_here"]){}
or even simpler :
div:not(.classname_of_the_first_div_here)
Assuming that there were no other div before the two div elements were created:
document.getElementsByTagName("div")[1].style.color = "blue";
use style attribute in the second div
<div id="div1" style="display:block;"></div>
if it has only two div's then use the last-child property.
yourparent div:last-child
{
your style
}
You basically have three options (maybe more, but then we need some code).
First one, use the element selector. but that means you're styling all elements of the same type on the page
div { background: red; }
Second option, style all divs that have no class attribute:
div:not([class]) { background: green; }
and last but not least, style a div that is a child of another element. If your document structure is build up properly this is most probably the way to go.
div.parent > div { background: blue; }
Checkout the Fiddle here
I am creating a from with sliding up/down animation in a bootstrap template.
Here is the code : http://bootply.com/94382
When You click on the add button, the form will slide down and when You will click it again, it will slide up.
But if i am adding new elements on the page after the buttons, the new elements are not moving down instead the form is coming over the elements.
i want to achieve that the new elements will slide down and then form will come. But this is not happening now. Please help me out.
First of all remove position:absolute, position:fixed from your css where it actually not required. Also, use spans or ul li list with proper styles to render the icons, buttons, images in <div id="bottom-header">. Then remove position:absolute from your form and give proper margins width etc. so that you will get what you expected.
Replace your #sliding_form CSS properties to :
#sliding-form {
display: none;
background-color: #eee;
width: 45%;
margin-top: 60px;
overflow: hidden;
}
Updated Bootply