I have few similar blocks with similar content. If I hover on first block, for first block and one other sub-block in this first parent block classes should be added. And for the second block too: if I hover on second block for second block and sub-block in this parent second block shold be added the same classes.
Actually I can do unique classes or indentify for each block seperatly but I this this isn't correct and if I want to add I more block I have to change css, html and javascript code - this is uncomfortable.
var Block1 = $('.point-to-black');
ShopBlock1.mouseover(function(){
$(this).addClass('c-lb-black');
$('.c-lb-text-zone').addClass('c-lb-tz-full');
});
ShopBlock1.mouseout(function(){
$(this).removeClass('c-lb-black');
$('.c-lb-text-zone').removeClass('c-lb-tz-full');
});
.point-to-black {
width: 100%;
height: 100px;
transition: 0.5s;
}
.c-lb-black{
background-color: rgba(0,0,0,0.6)!important;
width: 100%!important;
height: 100px!important;
transition: 0.5s;
}
.c-lb-tz-full {
transition: 0.3s;
margin: 0px 0px 0px 33%!important;
padding: 3px 25%!important;
font-size: 25px!important;
transform: skew(-20deg)!important;
background: #c1af25!important;
line-height: 33px!important;
}
.c-lb-text-zone1 {
line-height: 33px;
letter-spacing: 2px;
transition: 0.3s;
margin: 0px 0px 0px 50%;
padding: 3px 15%;
font-size: 25px;
transform: skew(-20deg);
background: #c1af25;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="c-link-list">
<li>
<div class="c-lb-blog">
<div class="point-to-black">
<div class="c-lb-text-zone">
<h1>Blog1</h1>
</div>
</div>
</div>
</li>
<li>
<div class="c-lb-blog">
<div class="point-to-black">
<div class="c-lb-text-zone">
<h1>Blog2</h1>
</div>
</div>
</div>
</li>
</ul>
So if I do mouseover on 'point-to-black' block 'c-lb-black' class adds good just for current block because of 'this' pointer but 'c-lb-tz-full' adds for all blocks with class'c-lb-text-zone'.
$(this).find('.c-lb-text-zone').addClass('c-lb-tz-full');
And
$(this).find('.c-lb-text-zone').removeClass('c-lb-tz-full');
It will affect only the children of the specific div.
Related
I have 2 tabs that lay on a block with a background image. Depending on which tab is clicked, the background image of the tabs and the tab content panel should change height. I cannot do it through CSS so I thought of using JS to change heights, but it is not working.
Here is my code:
$('#two-tab').click(function() {
$('.search-tabs').height('350px');
$('#two-panel').height('272px')
});
.search-tabs {
background-image: url('https://i.pinimg.com/originals/af/8d/63/af8d63a477078732b79ff9d9fc60873f.jpg')!important;
background-position: center top!important;
height: 281px!important;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
.tab-radio{
display:none;
}
#one:checked ~ .panels #one-panel,
#two:checked ~ .panels #two-panel{
display:block
}
#one:checked ~ .tabs #one-tab,
#two:checked ~ .tabs #two-tab{
background:#F5A000;
color:#000;
}
.tab-wrapper {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 30px;
}
.tab {
cursor: pointer;
width: 160px;
padding: 5px 0px;
margin: 0px 10px;
background: #FFF;
display: inline-block;
text-align: center;
color: #000;
border-radius: 6px 6px 0px 0px;
font-size: 13px;
font-family: 'Lato', sans-serif;
font-weight: 700;
}
.panels {
height: 229px;
width: 333px;
position: relative;
border-radius: 0px 0px 8px 8px;
border-top: 3px solid #F5A000;
background-color: rgba(255, 255, 255, 0.5);
}
.panel {
display: none;
animation: fadein .8s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-tabs">
<div class="tab-wrapper">
<input class="tab-radio" id="one" name="group" type="radio" checked>
<input class="tab-radio" id="two" name="group" type="radio">
<div class="tabs">
<label class="tab" id="one-tab" for="one">Tab 1</label>
<label class="tab" id="two-tab" for="two">Tab 2</label>
</div>
<div class="panels">
<div class="panel" id="one-panel">
Content for tab 1
</div>
<div class="panel" id="two-panel">
Content for tab 2
</div>
</div>
</div>
</div>
But this is not working. Any ideas?
You defined the height for .search-tabs with !important which overwrites the height that you set in the click handler.
!! I added my own picture so you please swap it with a picture of your desire.
!! This is the only JavaScript code that you will need for this to work, The lines that you wrote, I deleted them
!! Add this code in the JavaScript file and delete the previous code that you wrote.
This piece of code will do the follows
If you click tab 2 it will change the height of the desired elements
If you click tab 1 it will bring all the elements back to their original form.
ps: when you copy this code in your editor, right-click on the display and click on format document or just click (shift + alt + f)
const searchContainer = document.querySelector(".search-tabs");
const panel = document.querySelector("#two-panel");
const tabOne = document.querySelector("#two-tab");
const tabTwo = document.querySelector("#one-tab");
let changingFunc = function(one, two) {
searchContainer.style.height = `${one}`;
panel.style.height = `${two}`;
};
const panelHeight = panel.offsetHeight;
tabOne.addEventListener("click", function() {
changingFunc("350px", "272px");
});
tabTwo.addEventListener("click", function() {
changingFunc("281px", `${panelHeight}px`);
});
So I have this card that works as an entire link but inside that, I have an icon under a span tag and I don't want it to work as the card's link rather just act like an icon, Ik I can solve this if I don't make the entire card href but then I'd have to manually turn all the required elements present inside the card into href which I feel like isn't efficient and neat. So any suggestions on how do I go from here?
.card {
width: 250px;
height: 350;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
background-color: white;
margin-left: 30px;
margin-right: 30px;
margin-top: 30px;
margin-bottom: 30px;
cursor: pointer;
}
.top {
display: flex;
justify-content: space-between;
}
.year {
padding-top: 5px;
padding-left: 5px;
font-family: Circular Std Book;
}
.span-bookmark {
padding-left: 5px;
cursor: pointer;
}
{% for m in mlist %}
<div class="card">
<a href="http://www.google.com/search?q={{m.Name}}" target="_blank">
<div class="top">
<div class="year">{{m.Year}}</div>
<span class="span-bookmark"><i class="material-icons bookmark" id="bookmark-style">bookmark</i></span>
</div>
<div class="middle">
<div class="img-container"><img src="{{ m.Image.url }}"></div>
</div>
<div class="bottom">
<div class="title">{{m.Name}}</div>
<div class="target_id">{{m.targetid}}</div>
</div>
</a>
</div>
{% endfor %}
Make sure you have a position set on both the card and the icon div. Then set a z-index for the icon that is higher than the card in your css. Then if you assign the icon to be clickable, it won't click the card link when you click the icon. You can use z-index to arrange all the layers in your card.
You can stop navigation with preventDefault and stop bubbling up to the link with stopPropagation.
In the following demo, clicking on the img doesn't bubble up the DOM. Clicking on the div outside the img bubbles up to the A, as does clicking on the A text.
function showStuff(event) {
// Stop default action, e.g. following a link
event.preventDefault();
// Stop click from bubbling, e.g. to link parent
event.stopPropagation();
// Just for demonstration purposes, delete when no longer required
console.log('Click from ' + event.target.tagName +
' reached ' + event.currentTarget.tagName);
}
window.onload = function() {
// This listener is for demo only and prevents following the link
// Don't add it if you want to follow the link for clicks outside the img
let link = document.querySelector('a');
link.addEventListener('click', showStuff, false);
// This listener stops clicks from the img reaching the A and
// stops navigation from clicks on the img
let img = document.querySelector('img');
img.addEventListener('click', showStuff, false);
}
.card {
width: 250px;
height: 350;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
background-color: white;
margin: 30px;
cursor: pointer;
border: 1px solid green;
}
.middle {
margin: 20px;
border: 1px solid blue;
}
img {
height: 50px;
width: 50px;
margin: 20px;
border: 1px solid red;
cursor: default;
}
<div class="card">
<a href="http://www.google.com/search?q={{m.Name}}" target="_blank">Some link text
<div class="middle">
<div class="img-container"><img src="foo.jpg"></div>
</div>
Some more link text
</a>
</div>
I am trying to make a toggle like menu for showing different pieces of information, however my attempt is not working.
What I am looking for is if the user clicks on any of the titles (A, B or C) the description will fadeIn. That is why I tried using the closest() method to get the description associated with the title. Then when the user clicks on a different title, for the current one to close and the other open.
Does anyone see what I am doing wrong?
$(".service-list-title").on("click", function(event) {
$(this).closest('.service-list-description').fadeIn(300).siblings().closest('.service-list-description').fadeOut(300);
});
.service-list-title {
display: block;
color: #333333;
font-size: 1.1rem;
letter-spacing: .1rem;
margin: 20px 0px;
padding: 0 10px 0 25px;
cursor: pointer;
transition: all .35s ease;
-webkit-transition: all .35s ease;
}
.service-list-description {
display: none;
color: #333333;
font-size: .9rem;
margin: 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service-list">
<li class="service-list-title">A</li>
<p class="service-list-description">This is the content for A</p>
</div>
<div class="service-list">
<li class="service-list-title">B</li>
<p class="service-list-description">This is the content for B</p>
</div>
<div class="service-list">
<li class="service-list-title">C</li>
<p class="service-list-description">This is the content for C</p>
</div>
The issue with your code is that you're using closest(), which looks for parent elements, instead of next() or siblings() which searches for elements at the same level.
However you can make the logic much simpler by attaching the event handler to the .service-list element and using find() to get the required element to fadeToggle(). You can then select all the other .service-list-description elements and call fadeOut() to hide them. Try this:
$(".service-list").on("click", function(event) {
var $target = $(this).find('.service-list-description').fadeToggle(300);
$('.service-list-description').not($target).fadeOut(300);
});
.service-list-title {
display: block;
color: #333333;
font-size: 1.1rem;
letter-spacing: .1rem;
margin: 20px 0px;
padding: 0 10px 0 25px;
cursor: pointer;
transition: all .35s ease;
-webkit-transition: all .35s ease;
}
.service-list-description {
display: none;
color: #333333;
font-size: .9rem;
margin: 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service-list">
<li class="service-list-title">A</li>
<p class="service-list-description">This is the content for A</p>
</div>
<div class="service-list">
<li class="service-list-title">B</li>
<p class="service-list-description">This is the content for B</p>
</div>
<div class="service-list">
<li class="service-list-title">C</li>
<p class="service-list-description">This is the content for C</p>
</div>
The function below should do what you ask for:
$(".service-list-title").on("click", function(event) {
$('.service-list-description').fadeOut(300); // Close any that's open
$(this).siblings('.service-list-description').fadeIn(300); // Open new
});
Fiddle: https://jsfiddle.net/beekvang/oro9ue3k/
I'm styling a menu that has a toggleClass in there, so far no problem, but when i have the hover function and i do hover then mouse on the menu elements the function executes on all the menu's elements, how do i manage to only affect one at the time?
The menu:
<div id="menu_segundo">
<ul>
<li class="curso av">AV</li>
<li class="curso dc">DC</li>
<li class="curso dp">DP</li>
<li class="curso pa">PA</li>
</ul>
</div>
The Css
#menu_segundo {
margin-top: 20px;
float: right;
background: #58ACFA;
}
.curso {
color: white;
font-family: DIN;
width: 25px;
height: 10px;
border-left: 2px solid white;
padding-left: 10px;
padding-right: 0px;
}
.expand_menu{
color: white;
font-family: DIN;
width: 150px;
height: 10px;
border-left: 2px solid white;
padding-left: 10px;
padding-right: 0px;
}
The JS
var segundo = $('#menu_segundo').find('ul').children();
segundo.hover(function(){
$(this).toggleClass('expand_menu');
})
Here is a DEMO of the menu
This does not need JS to function.
Simply change .expand_menu to .curso:hover in your CSS.
Alternatively, to fix your JS use:
$("#menu_segundo").on("hover", ".curso", function(){
$(this).toggleClass('expand_menu');
});
The problem with your JS is that you are toggling the class on all li elements. segundo is set to equal all li elements, not the one being hovered.
UPDATE
There is a problem beyond the initial applying of classes, the CSS/HTML structure is not rendering correctly. The problem is that extending one of the li elements increases the size of the entire ul moving all li elements in the process.
Updating the HTML to this:
<div id="menu_segundo">
<div class="curso av">AV</div>
<div class="curso dc">DC</div>
<div class="curso dp">DP</div>
<div class="curso pa">PA</div>
</div>
And updating the CSS to:
#menu_segundo {
margin-top: 20px;
float: right;
}
.curso {
color: white;
font-family: DIN;
width: 25px;
border-left: 2px solid white;
padding-left: 10px;
padding-right: 0px;
background: #58ACFA;
float: right;
clear:both;
}
.curso:hover{
width: 150px;
}
Gets the desired behavior. See this Fiddle for an example.
Note
The CSS can also be set to
.expand_menu{
width: 150px;
}
To continue with the JS solution.
Try like
var segundo = $('#menu_segundo li')
segundo.hover(function(){
$(this).toggleClass('expand_menu');
})
Disclaimer: I'm relatively new to jQuery and JavaScript. The openStatement() function below executes whenever it is determined that the #statementTab is not already open. If the code below isn't enough information, simply check out the source below.
Basically, the UL containing the various tabs flickers and disappears whenever the user opens the #statementTab. I'd like to fix this.
Source: http://www.cameronhermens.com/dbunkr/brochure.html
// The openStatement function opens the statement tab when the user clicks
<a id="openIt"> (if the statement tab isn't already open).
function openStatement() {
$('#explore').animate({width: '70%'}, '200');
$('#statementTab').animate({width: '213px'}, '1000');
};
// Here's the DIV.
<div id="explore" class="brochure">
<ul id="brochureTab">
<li><a href="welcome.html" >welcome</a></li>
<li>our mission</li>
<li>what is dBunkr</li>
</ul>
</div>
<div id="statementTab">
<a id="openIt">
<img class="opaque left-5" src="images/rightArrow.jpg" height="10" width="6" alt="Expand the Statement tab">
<span class="statementBar">Statements</span>
</a>
</div>
The UL#brochureTab is being hidden during animation because as #explore is animating, the jQuery is applying a style of overflow: hidden to it. This style is then removed upon completion of the animation.
A quick solution (i.e. without addressing the way that you have styled the rest of your elements) would be to add the style overflow: visible !important; to #explore.
You have the ul#brochureTab outside the div#explore by using the CSS top: -45px;.
Whenever you animate the div#explore with jQuery .animate(), the ul#brochureTab gets "flashed" because the jQuery .animate() automatic switches to overflow:"hidden" while performing the animation.
The solution is to use a DIV to serve as a wrapper to the div#explore, and have it with the visual look you've got on the div#explore:
CSS
#wrapper {
background-color: #FFFFFF;
border: 3px solid #CCCCCC;
border-radius: 7px 7px 7px 7px;
box-shadow: 3px 3px 3px #CCCCCC;
float: left;
height: inherit;
padding: 5px;
}
THE MARKUP WOULD BE:
<div id="wrapper">
<div id="explorer">
<ul id="brochureTab">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<div id="ui-tabs-3">...</div>
<div id="ui-tabs-10">...</div>
<div id="ui-tabs-12">...</div>
</div>
<div id="statementTab">...</div>
</div>
AND TO PREVENT THE FLASHING:
#brochureTab {
float: left;
left: 10px;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
/* top: -45px; remove this line */
}
.ui-tabs-panel {
background: none repeat scroll 0 0 #FFFFFF;
border: 2px solid #CCCCCC;
float: left;
left: 30px;
margin: 0 auto 30px;
min-height: 410px;
padding: 10px;
position: relative;
/* top: -20px; remove this line */
width: 90%;
z-index: 1;
}
To your current animation method, no changes need to be made.
To your new CSS for the wrapper, may require some "tunning".