The website I'm currently working on is here (map section):
http://vtx.canny-creative.com/
I'm currently facing two problems:
The 'active' class adds to the .location-card on the left. But I also need the corresponding .dot on the right hand side to have 'active' added to it. Which I can do. However...
What I can't do, is get the "first loaded/visible" DIVs, "selected dot", to have 'active' applied. So the active will only apply on click, rather than "on load" and then "on click" as I cycle through them.
$('a.dot').on('click tap', function(e) {
e.preventDefault();
$('.card').css('z-index', '0');
$('.card.active').css('z-index', '2');
$('.card').removeClass('active');
$($(this).attr('href')).addClass('active');
});
.where-we-operate .card-container {
position: relative;
.card {
position: absolute;
top: 0px;
}
.active {
z-index: 4 !important;
animation: foo 0.5s ease 1;
}
}
.where-we-operate .map-container {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="where-we-operate">
<div class="grid-container">
<div class="grid-x grid-padding-x grid-margin-x">
<div class="large-6 cell card-container">
<div id="card1" class="location-tile card">
Card Info Here
</div>
<div id="card2" class="location-tile card">
Card Info Here
</div>
<div id="card3" class="location-tile card">
Card Info Here
</div>
</div>
<div class="large-6 cell map-container">
<img src="http://localhost:8888/vortex/wp-content/uploads/2018/03/uk-map.jpg" />
</div>
</div>
</div>
</section>
I've created something using the jQuery fiddle here:
https://jsfiddle.net/harishkommuri/xc8ebuf4/
I'm officially answering this mainly because I can't stand unanswered questions, then again, it might be helpful to those on an off-day or those just starting out.
You can simply add the active class in your HTML to the elements that should have the class on pageload:
<div id="card1" class="location-tile card active">
Another option is to add the active class with jQuery either before or after your event-handler:
$('#card1').addClass('active');
Related
I want the css codes of the blog1popup class to change when the image is clicked.
I know how to do this with hover, but i don't know how to make this action happen by clicking.
The element I want to use as this button;
<div class="row">
<div class="col-lg-4 col-md-6 sm-mb-35px">
<div class="blog-item">
<div class="img">
<img src="assets/img/blog-grid-1.jpg" alt=""></a>
<span class="day">14</span> <span class="month">April</span>
</div>
Fransa Geneline Islak Mendil İhracı
<p style="padding-left: 30px; padding-bottom: 20px; margin-top: -25px; line-height: 20px;">Tüm dünya ülkelerine yardımseverliği gösteren ülkemize..</p>
</div>
</div>
This is the element I want to have changes in the css codes.
<div class="blog1popup"></div>
Example on hover technique;
.blog-item:hover > .blog1popup{
opacity: 100%;
}
You can add click event on blog-item class, then you can add classes to any element or change any css property using jquery methods.
Eg.
$(".blog-item").on("click", function (e) {
$(".blog1popup").css("opacity", "100%");
$(".blog1popup").addClass("any-class");
});
I want to toggle whether to display an item I should do the following:
$(item).css("display", "none")
$(item).css("display", "block")
But this method is not robust enough, given that the item might be "display: flex" or "display: table".
I think in react, I can just delete that element and re-render it when I need to, but is there any simple way to do that using jQuery besides directly modify the html to delete that element?
Thanks.
you should use toggleClass() in case you are working with flex then it would be a better approach to keep the flex properties in a separate class and add/remove or in easy words toggle the flex class if you want to hide or show that container with defaults set to display:none in a separate class, in this way either the container is flex or table it works either ways see the example below
$(".show").on('click', function() {
if ($(this).siblings('.my-item').css('display') == 'flex') {
$(this).siblings('.my-item').toggleClass('myflex');
} else {
$(this).siblings('.my-item').toggleClass('myTable');
}
})
.my-item {
display: none;
}
.myflex {
display: flex;
background-color: #f8f8f8;
}
.myTable {
display: block;
background-color: #d8d8d8;
}
.container {
margin-top: 10px;
border: 5px dashed #c8c8c8;
}
.show {
padding: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">1
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">2
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myTable">TABLE DISPLAY
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">3
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">4
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">5
</div>
</div>
You could also add a custom css class and switch them using below. This would also give a bit more control over styling.
$(item).addClass('display-none');
$(item).removeClass('display-none');
$(item).removeClass('display-none display-flex'); // For removing multiple classes
and for example the css properties would be like
.display-none{
display: none !important;
}
Why not just use jQuery's show/hide functions?
$(item).hide();
$(item).show();
hide function is roughly equivalent to calling .css( "display", "none" ), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. (from jQuery documentation)
$('#btnToggle').click(function(){
if($('#item').is(':visible'))
{
$('#item').hide();
}
else
{
$('#item').show();
}
$('#log').html("Current display state: " + $('#item').css('display'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnToggle">toggle</button>
<div id="item" style="display: flex;">
flex div
</div>
<div id="log">
</div>
You can do a
$(item).css("display", "none")
and assign the flex or table value of the display property to any custom attribute, e.g. $(item).attr("disp_prop","flex") and on returning back to display you can do a simple.
$(item).css("display", $(item).attr("disp_prop"))
I am trying to create a sticky menu using CSS Bootstrap affix and list-group menu.
I manage to get most of it to work except for when the user scrolls down.
When the user scrolls down, the menu seems to take the entire with of the page.
I tried to set it up via data attributes
using something like this
<div class="container">
<div class="row">
<div class="col-md-3" id="leftCol">
<div data-spy="affix">
<div class="list-group list-group-root well">
<a class="list-group-item" href="#introduction">Introduction</a>
<a class="list-group-item" href="#features">Features</a>
<a class="list-group-item" href="#dependencies">Dependencies</a>
</div>
</div>
</div>
<div class="col-md-9" id="mainCol">
Some long text for the body along with some tables.
</div>
</div>
</div>
But the data attribute did not make the menu stick! it just kept it on the top.
So I tried to use JS to get the job done like this
$(function(){
$('#leftCol').affix({
offset: {
top: 100,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
}
}
});
});
I created jsFiddle to show you the current behavior.
How can I fix this affix so when the user scrolls down the menu maintain the same shape?
First of all, you should use either data-attributes or JS.
I updated your jsFiddle. The position of id="leftCol" was changed:
<div class="col-md-3" >
<div id="leftCol">
...
</div>
</div>
and style was added:
#leftCol {
width: 220px;
}
Also, you should add media queries to remove affix from mobile view.
As an "unacceptable" workaround, I set a max width of the menu to 250px like so
.list-group.list-group-root {
padding: 0;
max-width: 250px;
}
I am not sure how to get it to work without adding a max-with the max with should be defined by the parent. In this case class="col-md-3"
UPDATED
javascript to the rescue!
I added the following JS code to solve this problem once an for all.
It basically resize the menu everytime affix.bs.affix event is fired
$(document).on('affix.bs.affix', '#docs-menu', function() {
$(this).width($(this).width());
});
From the docs
affix.bs.affix => This event fires immediately before the element has
been affixed.
Ok I believe I got most of the code working like you want it to. The main changes I made were adding this CSS:
#leftCol {
display: block;
height: auto;
padding: 0;
width: 100%;
}
.navbar-fixed-top-again {
position: static;
top: 60px;
z-index:1031;
}
.navbar-inner {
background: red;
padding: 5px;
}
.affix {
position: fixed !important;
}
and I changed up some of the structure on your HTML:
<div class="container body-content">
<div>made up content to allow the navigation to scroll more before it becomes sticky. This height will need to be set in the data-offset-top which is in the leftCol DIV just below this content. The same will apply if you need to set it for a footer offset.</div>
<!-- new nav section -->
<div class="col-md-3 navbar-fixed-top-again" id="leftCol" data-spy="affix" data-offset-top="80">
<div class="navbar-inner">
<div class="list-group list-group-root well">
*the rest of your code*
</div>
</div>
</div>
</div>
The main problem now is having a sticky navigation menu with variable height. If you notice when you scroll your reading content underneath jumps up and gets hidden. It seems that it is possible to fix this using JavaScript (link to SO question).
Heres the link to your updated Fiddle. Hope that helps.
So I have a div:
<div id="lol">
Some random text!
</div>
And I have other div:
<div id="happy">
lol
</div>
How could a make an animation, in which the first div is smoothly replaced by the second one? If a Do a fadeIn/fadeOut, the second div would only starting to happear after the first div was gone.
I think simply this would work.
$("#happy").hide();
$("#smooth").click(function(){
$("#happy").show();//no transition for this
$("#lol").slideUp();//with transition
});
here is a demo fiddle
or you can even toggle the effect like this
Yes. Quite easy. Assuming #lol is visible and #happy is not. (You can use jQuery's show/hide to set that up).
$('#lol').fadeOut(function() {
$('#happy').fadeIn();
});
$("#lol").fadeOut(1000,function(){
$("#happy").fadeIn();
});
I think that is what do you want:
$("button").click(function () {
$(".happy").toggle('slow');
});
JSFIDDLE
You can add a class to both of these divs, then toggle the class. This will allow both to toggle simultaneously (one fades in at the same time the other is fading out).
HTML
<div id="lol" class="toggle">
Some random text!
</div>
<div id="happy" class="toggle">
lol
</div>
<button id="btn">Replace</button>
JQuery
$("#happy").hide();
$("#btn").click(function() {
$(".toggle").toggle(2000);
});
JSFiddle
Using fadeOut/fadeIn will work if you use absolute positioning. There are many other options as well.
I'm not at all sure what you would like to see in your final result, but here are a few examples:
Example fiddle
CSS:
div.container {
position: relative;
height: 30px;
}
div.container div {
position: absolute;
top: 0;
left: 0;
}
HTML:
<div class="container">
<div id="lol">Some random text!</div>
<div id="happy" style="display: none">lol</div>
</div>
<div class="container">
<div id="lol1">Some random text!</div>
<div id="happy1" style="display: none">lol</div>
</div>
<div class="container">
<div id="lol2">Some random text!</div>
<div id="happy2" style="left: -200px">lol</div>
</div>
<div class="container">
<div id="lol3">Some random text!</div>
<div id="happy3" style="left: 200px; opacity: 0;">lol</div>
</div>
Sample code:
$('#lol').fadeOut(1000);
$('#happy').fadeIn(1000);
$('#lol1').slideUp(1000);
$('#happy1').slideDown(1000);
$('#lol2').animate({left: -200});
$('#happy2').animate({left: 0});
$('#lol3').animate({left: -200}, 1000);
$('#happy3').animate({left: 0, opacity: 1}, 1500);
I'm trying to put over a leaflet map a bootstrap row, my html is:
<div class="row-fluid some" id="map">
<div class="span1"></div>
<div class="span2"></div>
</div>
span1 and span2 are columns with some information with rgba background. the leftover columns are a visible map area.
The problem is the map is showing over the columns and they are visible only when map is loading or zooming out.
span1 and span2 have z-index: 2000
How to I can put columns visible over the map?
You can put them in a common container, and absolutely position the row you want to overlay the map.
demo (with Leaflet)
<div class="container-fluid">
<div class="mapbox">
<div class="row-fluid some" id="map">
<img src="//placehold.it/600x400">
</div>
<div class="row-fluid overlay">
<div class="span1">
<button class="btn btn-primary">Button</button>
</div>
<div class="span2">
<button class="btn">Button</button>
</div>
</div>
</div>
</div>
.mapbox {
position: relative;
}
.mapbox .overlay {
position: absolute;
top: 0;
left: 0;
z-index: 314159;
pointer-events: none;
}
.mapbox .overlay .btn {
pointer-events: initial;
}
Clicking through an element is possible by specifying pointer-events: none. Note that this by default removes the ability to click children of said element (because the default pointer-events value is inherit), so declare pointer-events: initial on those elements you want to be able to interact with.
note: the reason the buttons are stacking on the fiddle is Bootstrap's media queries, are seeing the small preview as a mobile-phone size.