Expand div on click not working - javascript

I have this example jsfiddle
HTML
<div class="container_he">
<div class="header_he"><span>Expand</span>
</div>
<div class="content_he">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>
Javascript
$(".header_he").click(function () {
$header_he = $(this);
//getting the next element
$content_he = $header_he.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content_he.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header_he.text(function () {
//change text based on condition
return $content_he.is(":visible") ? "Collapse" : "Expand";
});
});
});
CSS
.container_he {
width:100%;
border:1px solid #d3d3d3;
}
.container_he div {
width:100%;
}
.container_he .header_he {
background-color:#d3d3d3;
padding: 2px;
cursor: pointer;
font-weight: bold;
}
.container_he .content_he {
display: none;
padding : 5px;
}
There it works perfectly. But when I wanted to launch in my website it won't expand to any click on it.
Here is my website link. http://darbs.ecotechno.lv/en/products
What could cause this error ? Some other div elements prevent from expanding?
Thanks

You are trying to include the fancybox and application script at the top of your page and as you haven't included jQuery Library before this it is crashing the scripts and therefore nothing will work.
You need to add the following to your page before the other 2 scripts:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
A good tip would be to use a decent browser like chrome and press f12. You will be able to access the js console and it will give you a list of any errors that are occuring

First fix your fancybox error - TypeError: $(...).fancybox is not a function. This might also cause the problem

I have found $(...).fancybox is not a function when viewing your site. That causes script to break

Related

Why toggling doesn't work on Firefox Developer Tools?

I don't know why my javascript code is not toggling on firefox developers tools, and that's my code:
const hamburger = document.querySelector('.header .nav-bar .nav-list .hamburger');
const mobile_menu = document.querySelector('.header .nav-bar .nav-list .menu');
const header = document.querySelector('.header-container')
hamburger.addEventListener('click',() => {
hamburger.classList.toggle('active');
});
Maybe you can check, if your element is clicked or not with console.log()
hamburger.addEventListener('click', function(){
console.log("test")
})
I suggest you not to use arrow function in addEventListener, because of 'this' problem in arrow function
When you open developer tools in Firefox, on the left hand side of the menu there are tab header for "inspect", "console", network" and so on.
On the right hand side of the same menu bar, there is an icon of a framed document that shows "Select an iframe as the currently targeted document" when you hover over it. Click the icon and select the iframe containing the .header-container element.
Assuming the correct nested elements have been set up in HTML, the posted code now runs if you paste it after the script input prompt and press enter, and you can click the hamburger icon to toggle its active cf class.
Use of the const declaration in the pasted script prevents it being run more than once without reloading the page, which is a good thing - an even number of anonymous listeners that each toggle active would not affect the class list of the hamburger element.
FWIW, some HTML that can be used to show the code in the post "just works" when run in the Firefox console:
<style>
div { margin: 0.5rem; margin-left: 2rem; border: thin solid maroon;}
.active {background-color: yellow;}
</style>
<div class="header-container">
.header-container
<div class="header">
.header
<div class="nav-bar">
.nav-bar
<div class="nav-list">
.nav-list
<div class="hamburger">
.hamburger
</div>
<div class="menu">
.menu
</div>
(nav-list)
</div>
(nav-bar)
</div>
(header)
</div>
(header-container)
</div>
However, if the hamburger menu structure is inside an iframe element it needs to be selected first to prevent generating an error that hamburger is null.

Making a JS toggle div close when another is opened, and change image on click

I am new to JavaScript. Currently, I am working on a small toggle for my website.
The goal is to have three buttons that open up different sections with information. I have this working on my website. Now, what I want to achieve is to make other divs close when the others are opened up. Furthermore, I would like the first div to be open when the page is loaded, including an indicator (for example orange image) on the button. Can you please help me with this?
For some reason, the script works on my website, but not on the JSfiddle:
https://jsfiddle.net/q7evaLsn/1/
Current code:
$('.button1').click(function(){
$('.product').slideToggle('slow');
});
$('.button2').click(function(){
$('.lockedin').slideToggle('slow');
});
$('.button3').click(function(){
$('.developers').slideToggle('slow');
});
.button2
{
padding-top: 10px;
}
.button3
{
padding-top: 15px;
}
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/product-holder.png" class="button1" alt="Expand"/>
</h3>
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/lockedin-holder.png" class="button2" alt="Expand"/>
</h3>
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/developers-holder.png" class="button3" alt="Expand"/>
</h3>
<div class="product">
Testdiv1
</div>
<div class="lockedin">
Testdiv2
</div>
<div class="developers">
Testdiv3
</div>
Your help is greatly appreciated!
You can simply slide up everything before you start toggling.
For ex
$('.button3').click(function(){
$('.product').slideUp();
$('.lockedin').slideUp();
$('.developers').slideToggle('slow');
});
Your JSfiddle isn't working because you haven't included the jQuery library required for some of your functions. For future reference, jQuery is a popular javascript library which simplifies and extends some basic javascript functions, you can use both interchangeably however if you do want the extra features of jQuery then you'll have to include it like so in your HTML:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
As mentioned by #SURESH you'll likely want to slide the other areas up where you are toggling the target area:
$('.example-button').click(function(){
$('.section-to-hide-1').slideUp();
$('.section-to-hide-2').slideUp();
$('.section-to-toggle-1').slideToggle();
});
Just as further formatting advice, you have your images (that are acting as buttons) within header tags.
It's generally bad practice to use these header tags for anything
other than headings/titles
I'd recommend using A tags or even BUTTON tags to do the same job
I'd try not to use IMG tags as essentially text buttons, you will be able to style a button similarly like so:
<button class="button1">Products</button>
<style>
.button1 { text-align: center; padding: 10px; text-transform: uppercase: border-radius: 100%; border: 3px solid orange; background: white; color: #000; }
</style>
This will allow search engines/screen readers to read your button element, and you can make hover effects etc.

When click on sidebar, change only part of the screen

I have a question, which I can't ask directly, but will try to explain as much as I can, so you can help me.
The thing is next: I am making a project about some football league, and I have a sidebar which lists rounds of the competitions like this
<div id="sidebar">
<h2>2017/18</h2>
<h4>1st Qualif. Round</h4>
<h4>2nd Qualif. Round</h4>
<h4>3rd Qualif. Round</h4>
<h4>Play-Offs</h4>
</div>
It's nothing much, as I am trying to keep it simple. I will make those clickable, but I don't want them to lead me to another page, I want them just to change the part of the main container of the page.
Something just like on http://www.flashscore.com. When you click to change date, the url stays flashscore.com, but the page changes to the date that you clicked.
I know this all sounds crazy, but if you understand me, I will explain even further with whatever you need me to.
Also, I am fairly new to Javascript, but will try to incorporate it into the website I am making, as I think this is pure javascript.
Look into AJAX, that is what you will want to do in order to grab new info from a server without doing a full page postback / reload. It will be mostly JS with maybe some CSS to show / hide content. I'm on mobile so I can't give a great demo, but I'll try when I get off work.
EDIT: looks like I thought you were asking about loading new data. Should be easier than that if you just want to change content to display. I'll post more details later
Update: relevant fiddle: https://jsfiddle.net/44ka1be6/
html
<div class="wrapper">
<div class="sidebar">
<div>
Stuff 1
</div>
<div>
Stuff 2
</div>
<div>
Stuff 3
</div>
</div>
<div id="content">
Default stuff
</div>
</div>
js
$(document).ready(function() {
$('.sidebar div').click(function(e) {
$('#content').text($(this).text())
})
})
css
.sidebar, #content {
display: inline-block;
}
.sidebar div {
border: 1px solid black;
font-size: 18px;
padding: 8px 5px;
}
.wrapper {
border: 1px solid black;
}
It is very hard to answer without details, but you can make the main body of the page in an element (div for example) and write to the innerHTML when they click on a link. Depending on what you want to go in the main body, you can have it all as strings in JS, or preferably load the data through AJAX. See: https://www.w3schools.com/xml/ajax_intro.asp. They have a lot of good example code.
In case you just want to update your container with a new static content, you can just add a click event listener to your sidebar:
sidebar = document.getElementById('sidebar');
container = document.getElementById('container');
sidebar.addEventListener('click', function(e) {
container.innerHTML = "New content";
});
#sidebar {
float: left;
}
<div id="sidebar">
<h2>2017/18</h2>
<h4>1st Qualif. Round</h4>
<h4>2nd Qualif. Round</h4>
<h4>3rd Qualif. Round</h4>
<h4>Play-Offs</h4>
</div>
<div id="container">Content</div>

Page jumps on checkbox click even with javascript disabled

A while ago you guys helped me with a page jump issue on this page in this forum post. I will be referring to the styled checkboxes under "Clients." Well a while back I just set the min-height on the changing container and it then prevented the page jump, but no longer does (for an unknown reason). Well, I went ahead and put window.scrollTo(0,1400) in my function, but it doesn't center the styled checkboxes correctly on IE so now I'm back to trying to figure out why the page jumps.
The weirdest thing though.. the page jumps when clicking one of the styled checkboxes even if you disable javascript (in chrome developer tool settings and then refresh). Why would a checkbox with javascript turned off cause a page jump?
I had a quick look on your source code I couldn't figure out why do you pull data using json on each click? does the clients change LIVE?
What i mean is you can list all your clients without Using Get Json or any kind of live query and then add a class for their related respective verticals.
For example for Services and healthcare,
css
#verticals li{
float:left;
list-style:none;
background-color: #97ceff;
color: black;
border-radius:2px;
margin-right:10px;
padding:5px 10px;
cursor:pointer;
}
#verticals li.activevertical{
background-color: #2f7fc7;
color: #fff;
}
html output
<!-- list verticals options !-->
<ul id="verticals">
<li id="service">Services</li>
<li id="healthcare">Healthcare</li>
</ul>
<div style="clear:both"></div>
<ul id="customers" class="">
<!-- Add filter class here in the <li> add filter_ before vertical kind !-->
<li class="filter_service">Ecova</li>
<li class="filter_service">HP</li>
<li class="filter_service">Gartner</li>
<li class="filter_healthcare">Henry Schein</li>
<li class="filter_healthcare">GE Healthcare</li>
<li class="filter_healthcare">BerylHealth</li>
<!-- and if a vertical can be in two categories add both vertical classes !-->
<li class="filter_healthcare filter_service">BerylHealth Show in Service and Healthcare</li>
</ul>
jQuery : very short version
jQuery(document).ready(function($){
$("#verticals li").on('click', function(){
var filterli = ".filter_"+$(this).attr("id");
$("#customers li").hide();
$("#verticals li").removeClass('activevertical');
$(this).addClass('activevertical');
$(filterli).show();
});
});
check it out at JSFiddle

(html/css/javascript) Trying to make my Current Page link in the navbar a different color

I've been reading around and people recommending only CSS to change the current page navbar link background color but I don't get how that's possible since CSS is static and I won't be able to add/remove the .currentlink class on the links? So right now I'm using JS / jquery to try to add / remove class based on click, but the site refreshes and nothing is saved when I click, so that the class that I added/removed doesn't do anything. May someone guide me the right direction? Example: I click on the last link of the HTML I gave you, but it would just go to that site and since everything refreshes to a new site, the background doesn't change.
HTML
<nav class="clearfix">
home
about us
tour
flickr search
<div class="rightnav">
Sign Up
Log In
</div>
</nav>
CSS
.greybackground {
background: #E6E6E6;
}
JS
$('nav a').on('click', function(){
$('nav a').removeClass('greybackground');
$(this).addClass('greybackground');
});
If you are creating multi page website and want to change link color on each page, simply create a class with specific css properties and add this class to respective navbar link on each page. Make sure that on any page, class must be added to only respective page link.
Any if you are looking solution for single page website following code will work just fine
Here is html css code for simple navigation bar
<h1>navbar</h1>
<li>Home</li>
<li>Products</li>
<li>About us</li>
<li>Contact</li>
<button>Log in</button>
</ul>
a{
background-color:black;
padding:10px;
text-decoration:none;
color:white;
}
li{
margin:30px;
display:inline;
}
ul{
list-style-type: none;
}
.transform{
background-color:red;
}
button{
background-color:green;
padding:10px;
color:white;
}
This is javascript to change bg color of active link
$("a.link").click(function(){
$("a.link").css("background-color", "black");
$(this).css("background-color", "red");
});
Simply add class '.link' for every navbar link and when user clicks on any navbar link css property ad applied to that link and all other links will change their bg color to none. I hope it helps
https://codepen.io/pranjalkoshti/pen/GMarvj
The easiest way to achieve this is identify an element that
Is present on every page
You can add markup to
For example, a div for your overall content.
If you add the following to the div :
<div id="content" data-currentpage="about">
This will identify the page uniquely.
and for each menu item add a class that matches:
<li>Home</li>
<li>Products</li>
<li>About us</li>
<li>Contact</li>
So, on page ready ( jQuery(document).ready(function(){...) run the following code:
// -- Find the pages 'data' tag --
var currentPage = jQuery('#content').data('currentPage');
// -- Add a dot to turn it into a class identifier --
currentPage = '.' + currentPage;
// -- Add a background class to to the menu item with that class --
jQuery(currentPage).addClass('greybackground');
This will 'match' each page (via the data-currentpage tag) to the corresponding menu item and add your background class to that menu item.
Solution in vanilla JS (HTML, CSS).
Navbar items need to be in class .navlinks
Add styling under the class current-link.
<html>
<nav>
<ul>
<li class="navlinks"></li>
<li class="navlinks"></li>
</ul>
</nav>
</html>
<style>
.current-link {
background-color: red;
}
</style>
<script>
let links = document.getElementsByClassName("navlinks");
for(let i = 0;i < links.length;i++){
if (links[i].href.replace(/\/$/, '') == ocument.URL.replace(/\/$/, '')){
links[i].classList.add("current-link");
}
}
</script>

Categories