My issue is I am only able to toggle "active" class on my first "side-menu" div and not the others. Please take a look at my codes and let me know what is wrong.
When active, there will be a span on the left showing that it is the current selection, refer to the attached image.
HTML SCRIPT
<div class="sidebar">
<div class="side-menu">
<a class="side-option" href="#beverages"><img src="images/beverage.png" alt=""></a>
<p>Beverages</p>
</div>
<div class="side-menu">
<a class="side-option" href="#burger"><img src="images/burger2.png" alt=""></a>
<p>Burger</p>
</div>
<div class="side-menu">
<a class="side-option" href="#pizza"><img src="images/pizza1.png" alt=""></a>
<p>Pizza</p>
</div>
<div class="side-menu">
<a class="side-option" href="#pasta"><img src="images/pasta2.png" alt=""></a>
<p>Pasta</p>
</div>
<div class="side-menu">
<a class="side-option" href="#sides"><img src="images/sides1.png" alt=""></a>
<p>Sides</p>
</div>
<div class="side-menu">
<a class="side-option" href="#desserts"><img src="images/desserts1.png" alt=""></a>
<p>Desserts</p>
</div>
</div>
CSS SCRIPT
.side-menu.active p::after{
content: '';
background-color: var(--clr-primary);
width: 10px;
height: 100px;
position: absolute;
left: 0px;
top: 5px;
JS SCRIPT
let sidemenu = document.querySelector('.side-menu')
let fbg = document.querySelector('.food-box-grid')
sidemenu.onclick=function(){
sidemenu.classList.toggle('active')
fbg.classList.toggle('active')
}
I can toggle active class on the "beverages" but not on the other options such as burger, pizza...
According to MDN
querySelector() returns the first Element within the document that matches the specified selector
You want to use querySelectorAll(), then iterate through the output and toggle the class for each element.
Something like this
let sidemenu = document.querySelectorAll('.side-menu')
let fbg = document.querySelectorAll('.food-box-grid')
sidemenu.onclick=function(){
sidemenu.forEach((i) => {
i.classList.toggle("active")
})
fbg.forEach((i) => {
i.classList.toggle("active")
})
}
Related
How can I make a div tag stay the same location with the same size? I have the following code to display information using left and right pane called group-left and group-right. When the content of group-right changes the group-left height changes. I want a fixed size and fixed position if the content grows.
<div class="pane even">
<div class="group-left bg-highlight" style="top: 0px;">
<div class="pane-content">
<p class="m-t-md">
#foreach (var item in rpInfo)
{
<li data-expanded="true" class="panel-handler" data-id="#item.ID">
<i class="fa fa-check-circle"></i>#item.PartyName
<ul class="list-unstyled m-x-md m-b-md">
<li data-expanded="true"> <i class="fas fa-check-circle">
</i> #item.ContactName </li>
</ul>
</li>
}
</p>
</div>
</div>
<div class="group-right" style="top: 0px;">
#foreach (var item in rpInfo)
{
<div class="card card-understated">
<div class="card-heading">
<h4>#(Localizer["Contact Preview "])</h4>
</div>
<div class="card-body">
<p>
#item.ContactName<br>
#item.ContactTitle<br>
#item.AddressLine1<br />
#item.City, #item.State #item.Country
</p>
</div>
</div
}
</div>
</div>
Here is what the CSS section looks like:
.group-left, .group-right {
float: none;
min-height: 320px;
vertical-align: middle;
position: relative;
margin: 0;
padding: 0;
}
I have this javascript code to make a treeview and to handle the Onclick event:
<script>
$(document).ready(function () {
$("#treeview").kendoTreeView();
$(".panel-handler ").click(function () {
let id = $(this).data("id");
if ($("#" + id).css('display') === 'none') {
$(".rpspanel ").slideUp();
$("#" + id).slideDown();
}
});
});
</script>
You have only set a min height on the divs, you need to specify a height if you want it to remain the same size, eg: "height: 300px". If you want the divs to be fixed on the page, meaning locked to that position and won't move even if you scroll, you need to apply "position: fixed".
I am trying to automatically click/open Tab2 in a web page whenever Tab1 loads so that Tab2 becomes the active tab. I'm not sure what needs to happen here since there is no specific URL to direct a user to, so would appreciate any assistance and feedback.
Thanks!
.active {
background: red;
}
<div id="xy1:primaryForm:xy22:0:xy23" class="nav active">
<span id="xy1:primaryForm:xy22:0:tabSwitch">
<span id="xy1:primaryForm:xy22:0:tabSwitch.start" style="display: none">
<img src="/img/loading.png" class="loadingimg">
</span>
<span id="xy1:primaryForm:xy22:0:tabSwitch.stop"></span>
</span>
Tab1
</div>
<div id="xy1:primaryForm:xy22:1:xy23" class="nav">
<span id="xy1:primaryForm:xy22:1:tabSwitch">
<span id="xy1:primaryForm:xy22:1:tabSwitch.start" style="display: none">
<img src="/img/loading.png" class="loadingimg">
</span>
<span id="xy1:primaryForm:xy22:1:tabSwitch.stop"></span>
</span>
Tab2
</div>
---------UPDATE-------------
I tried to simplify this a bit by not paying attention to all the functions inside the link and just wanted to click on the link based on the text()..
.active {
background: red;
}
<div id="xy1:primaryForm:xy22:0:xy23" class="nav active">
<span id="xy1:primaryForm:xy22:0:tabSwitch"></span>
Tab1
</div>
<div id="xy1:primaryForm:xy22:1:xy23" class="nav ">
<span id="xy1:primaryForm:xy22:1:tabSwitch"></span>
Tab2
</div>
The following jQuery sort of works, but it continues to click on Tab2 even when Tab2 is already active, so I want to get it to only click Tab2 if Tab1 has an active class:
var elements = $('a');
elements.each(function(index, domElement) {
var $element = $(domElement);
if ($element.text() === "Tab2") {
$element.click();
return false;
}
});
Is there a better JavaScript Solution to click some text() only if it's a child of an .active class?
I have used mixitup js to filter the plugin type in which each div is wrap in a column.
The main point is I can't use clear: both; CSS property.
I have achieved this issue in other sites by using
.parent-class .column-class:nth-of-type(3n+1){
clear:both;
}
But in mixitup I cannot target the nth item because of the filter, If I click in free tab than the nth item which I was targeting will be replaced by other div.
you can view the issue in this link but make sure your browser width is less than 1100px and more than 992px
Due to the long text of contact form 7 which comes in 2 lines the height of the div is more than others. I want to target 4th element for min-width: 992px; and clear that div.
HTML structure is :
<section class="plugin-listing-page">
<div class="col-sm-12 no-padding">
<div class="wrap">
<div class="plugin-type">
<ul id="filters" class="clearfix post-filter-controls">
<li><span class="filter active-onload theme-demo btn-default" data-filter=".all">All</span></li>
<li><span class="filter theme-demo btn-default" data-filter=".free">Free</span></li>
<li><span class="filter theme-demo btn-default" data-filter=".premium">Premium</span></li>
</ul>
</div>
<div class="filtr-container" id="pluginlist">
<div class="col-md-4 col-sm-6 all listplugin free" data-bound="">
<div class="single-plugin-list">
<div class="single-plugin-list-image">
<a href="">
<img src="https://pippinspluginscom.c.presscdn.com/wp-content/uploads/2011/09/plugin.png" >
</a>
</div>
<div class="single-plugin-list-content">
<h4 class="text-title">Test</h4>
<a class="theme-demo btn-default animate-arrow pull-left" href="#">View Detail<span class="dashicons dashicons-arrow-right-alt"></span></a>
<span class="theme-green pull-right">Free</span>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 all listplugin premium" data-bound="">
<div class="single-plugin-list">
<div class="single-plugin-list-image">
<a href="">
<img src="https://pippinspluginscom.c.presscdn.com/wp-content/uploads/2011/09/plugin.png" >
</a>
</div>
<div class="single-plugin-list-content">
<h4 class="text-title">Test</h4>
<a class="theme-demo btn-default animate-arrow pull-left" href="#">View Detail<span class="dashicons dashicons-arrow-right-alt"></span></a>
<span class="theme-green pull-right">Free</span>
</div>
</div>
</div>
</div>
</div>
</div>
JS for mixitup is:
jQuery(document).ready(function ($) {
jQuery.noConflict();
(function ($) {
$(function () {
var filterList = {
init: function () {
$('#pluginlist').mixItUp({
selectors: {
target: '.listplugin',
filter: '.filter'
},
load: {
filter: '.tables' // show app tab on first load
},callbacks: {
onMixEnd: function(state) {
if(state.activeFilter == '.listplugin')
$('.wil').addClass('active')
}
}
});
}
};
filterList.init();
});
setTimeout(function(){
$('#filters li .active-onload').click();
},100);
})(jQuery);
});
Is there any solution for clearing the height of the div so that it always floats left of the browser ?
There are many ways we can solve this issue. However, I would go for css based approach
#media (min-width: 992px) and (max-width: 1100px){
.single-plugin-list-content h4 a{
font-size: 90%; // or smaller
}
}
UPDATED:
If you can use flex then this will fix the issue. It should work on all screens. However you can add this to min-width: 992px media query. The decision is yours.
#pluginlist{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
How can I get an Image overlay to work with this code?
What I want is a set of icons to overlay, ontop of a image when the cursor moves over it.
http://socialartist.co/index.html
The code in question is HTML 5 and CSS 3, and has quite a lot of mark-up:
<ul class="items x_columns">
<li data-id="id-1" data-cat="#luxury">
<div class="preview"><a href="#" class="frame">
<img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" id="imgSmile" alt=""/></a>
</div>
<a class="title" href="#">Kirkbridge DNB</a>
<p>UK | Drum and Bass</p>
</li>
When I try to add a new div it just breaks the design (eg messes up the preview class border)
Is there 'an easy way' to just overlay onto an existing image, as above.
I don't really know how to set this up on Fiddle; I am hoping that ppl could just use developer tools (inspect element) on the page URL above?
If I got it right:
Add the icon you want to dispay inside the anchor tag:
Quick and dirty example: http://jsfiddle.net/ZVSVw/
<a href="#" class="frame">
<img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" id="imgSmile" alt=""/>
<div class=overlay>ICON</div>
</a>
Set it to display: none by default and style it with the selector .frame:hover > .overlay.
To your comment
remove the following line from your style.css:1654:
a > .frame:hover, a.frame:hover{
background: #ffffff;
/* border: 1px solid #24bfb6; remove this line */
}
You could add the other overlay picture with the display: none; property set and then basically toggle between the two pictures fiddle
Javascript:
jQuery('li[data-id="id-3"] > div').on('hover', 'a', function() {
jQuery(this).find('img').toggle();
jQuery(this).find('div.overlayContent').toggle();
});
Html:
<li data-id="id-3" data-cat="#holiday">
<div class="preview">
<a href="#" class="frame">
<img src="http://..." alt="default picture">
<div class="overlayContent" style="display: none;">...overlay content</div>
<!--img src="http://..." alt="alternate picture" style="display: none;"-->
</a>
</div>
<a class="title" href="#">TEST ME!</a>
<p>Test this one!</p>
</li>
I have a string
<li class="views-row views-row-4 views-row-even views-row-last" style="overflow-x: hidden; overflow-y: hidden; float: left; width: 221px; height: 227px; ">
<div class="views-field-field-image-fid">
<span class="field-content"><img class="imagefield imagefield-field_image" width="221" height="215" alt="" src="http://test.com/sites/default/files/1_03_2.png?1316715258"></span>
</div>
<div class="views-field-field-pager-item-text-value">
<span class="field-content">hydraSense®h</span>
</div>
<div class="views-field-field-slide-text-value">
<div class="field-content">hgfhfghgfhgfhhhgf</div>
</div>
</li>
And I want to get the views-row-4 from <li class=" how could I get this? My method of splitting by class didn't seem to work.
The first step is to get the li element itself. The easiest way is to attach and id to the guy then you can use the following to get the DOM element.
var element = document.getElementById('theNewId');
var classAttr = element.getAttribute('class');
var second = classList.split(" ")[1];
This assumes the "views-row-4" class is always the second one in the class list. If it's not then we'd need some other criteria by which to search for the value