i'm trying to save up some space on my vertical accordion menu by making it more interactive.
i managed to get the menu to physically work and css styled as i need it.
problem is upon page load 1x category is "open" if i remove the class="open" style it doesn't hide the category.
this can be shown: jsfiddle (category 2 is my problem!)
i'm not at all comfortable with jquery so i'm not sure if this can be changed to default all categories "closed" until its clicked.
<script>
$(document).ready(function(){
$("ul.accordion span.name").click(function()
{
var $li = $( this ).parent("li").has("ul");
if( $li.hasClass("open") )
{
$li.find("ul").slideUp('slow', function( ){
$li.removeClass("open");
});
}
else
{
$li.addClass("open");
$li.find("ul").slideDown('slow');
}
});
});
</script>
can this be edited in the jquery script i would ultimetly like multiple drop down category but this will actually take more space up that the original.
inserted at the top this line in document ready function :
$('li.open').removeClass('open').find('ul').hide();
[http://jsfiddle.net/9kjpn4j7/][1]
DEMO: [1]: http://jsfiddle.net/9kjpn4j7/
Related
I'm having some problems getting this page to work like I need it to. I finally got it to where it'll only allow 1 of the 9 sections open at a time but I can't get these sections to toggle open and close using the same trigger button. If these could have some sort of transition as well, such as sliding open and close, that would be great too. I'm just learning jquery and finally at a point where I should just ask the experts.
https://toyotechus.com/expanding-rows/ is the page I have this set up on.
This is the code I'm using. I have the initial script repeated for all 9 sections and the toggle code below it all.
<script>
( function( $ ) {
'use strict';
$( document ).ready( function() {
var $trigger = $( '.open-vc-row-auto1' );
var $hiddenRow = $( '.vc-row-auto1' );
if ( $hiddenRow.length ) {
$trigger.click( function() {
$hiddenRow.toggle();
return false;
} );
}
} );
} ( jQuery ) );
</script>
<script>
$(".togglerowlink").on("click", function(e) {
var target = $(this).attr("href");
$(target).slideToggle('slow');
$(".vc-row-auto").not(target).hide();
e.preventDefault();
});
</script>
Ideally this toggle would open AND close the section, not just open it. Also I believe it should be sliding open and closed between section changes and it's not.
So it looks likes you wrote individual script blocks to open and close each panel. 9 panels = 9 script blocks. This code opens and closes the rows properly, but doesn't close all the other ones, so you can have 2 or 3 rows open at the same time. This is BAD because you're repeating code over and over again, and making it difficult to change in the future.
But then you did a great thing!! You tried to write a SINGLE script block to close any panel that shouldn't be open. That's the right idea, and you should apply it to every panel.
Problems first:
This line doesn't work because you don't have href attributes on
your HTML elements: var target = $(this).attr("href"); So target === undefined and this does nothing.
You're being too specific with your selectors. This var $trigger = $( '.open-vc-row-auto9' ); is far far too specific to be reused for all the elements. That's why you have to write it 9 times. :(
Solutions - this will require a little html refactoring, but lets list our goals.
Write one piece of code to manage all buttons. It should apply the click handler to ALL buttons, and when a button is clicked, we should know what specific panel that button is trying to target.
Write HTML generic enough to allow for Goal 1 to be achieved. We will use data- attributes to identify buttons, and their corresponding panels.
<style>
.panel { display: none; }
</style>
<!-- buttons -->
<button class="btn" data-target="panel-1">Show Panel 1</button>
<button class="btn" data-target="panel-2">Show Panel 2</button>
<button class="btn" data-target="panel-3">Show Panel 3</button>
<!-- panels -->
<div class="panel" data-panel="panel-1"><h1>This is panel 1.</h1></div>
<div class="panel" data-panel="panel-2"><h1>This is panel 2.</h1></div>
<div class="panel" data-panel="panel-3"><h1>This is panel 3.</h1></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
// select all buttons
// get their target
// if target is open, close it
// if target is closed, open it, and close all others
$('.btn').click(function(e){
e.preventDefault();
var btn = $(e.target);
var target = btn.attr('data-target'); // panel-1, panel-2, etc.
var target_panel = $('[data-panel="'+target+'"]'); // css attribute selector
var targetIsVisible = target_panel.css('display') === 'block'; // display: block; means it's visible ;)
if (targetIsVisible === true){
target_panel.slideUp(); // show the one we want
} else {
$('.panel').hide(); // hide all panels that may or may not be open
target_panel.slideDown(); // show the one we want
}
});
});
</script>
JS FIDDLE DEMO
You'll need to apply the concepts to your code, it's not a perfect copy/paste fix. Good luck. You got this!
I have 12 buttons each with an ID, i'm using this script for the action.
$(document).ready(function() {
$("#WEyear18000").click(function() {
$("#WEtextarea").load("Files/Docs/y18000.txt");
$('#WEimage_view').html('<img src="Files/Image/treesimages/PalaeoGlaciolMaps.jpg" >');
$('#WEee244f5837 .PullZone').click();
wheelzoom(document.querySelectorAll('img'));
});
});
WEyear18000, is the id of button, WEtextarea, is the id of the div where txt is displayed on button click, WEimage_view, is the id of the div where new image displayed on same button click, WEee24f5837, is the id to close a collapsible panel where buttons are located.
There are 12 of these script statements in a .js file.
It all works but it causes some strange effects after the 2nd or another button is clicked, all the images on the page disappear but the one on the button click. Page is here, page with issue
Any suggestion on how to stream line script wanted. I a newbe to scripting but managed to hodgepodge this to work but has and adverse affect on the rest of the pages images. Suggestion and samples to jsfiddle. Thanks in advance.
<div id="wrapper">
<div id="WEtextarea"> </div>
<div id="WEimage_view"></div>
</div>
CSS controls size and all aspects of div.
I tried all your menu items... And did not notice such a bug.
So, while your're here... I have a suggestion to reduce your long script made of a small chunk repeated 12 times.
I would define the maps as objects, like this:
var maps = [
{
buttonId: "WEyear18000",
text: "Files/Docs/y18000.txt",
image: "Files/Image/treesimages/PalaeoGlaciolMaps.jpg"
},
{
// other 11 objects using the same structure...
}
];
And I would just add a class to each items, in the HTML, like this:
<div id="WEyear18000" class="BaseDiv RBoth OEWELinkButton OESK_WELinkButton_Default OECenterAH clickHandlerClass" style="z-index:1">
Then, I would use a shorter function like this one:
$(document).ready(function() {
$(".clickHandlerClass").click(function(){
// Get the id of the clicked menu item
var thisId = $(this).attr("id");
// Find its related object
var mapIndex = -1;
for(i=0;i<maps.length;i++){
if( maps[i].buttonId == thisId ){
mapIndex = i;
}
}
if(mapIndex != -1){
// Use the object infos in the page elements.
$("#WEtextarea").load(maps[mapIndex].text);
$('#WEimage_view').html('<img src="'+maps[mapIndex].image+'" >');
$('#WEee244f5837 .PullZone').click();
wheelzoom(document.querySelectorAll('img'));
}else{
console.log("Undefined map or id error...");
}
});
});
The array of objects is way easier to maintain... And an additional button easier to add.
You can use another class name than "clickHandlerClass".
;)
The wheelzoom looked like the only possible source of error to me. So I looked for its source, and found:
Wheelzoom replaces an img's background-image with its src. Then the src is set to a transparent image.
So, on the first wheelzoom, you get src transeparent, and on the second, you get a transparent background-image as well.
You can fix this by calling wheelzoom only on your new image:
$(document).ready(function() {
$("#WEyear18000").click(function() {
$("#WEtextarea").load("Files/Docs/y18000.txt");
$('#WEimage_view').html('<img src="Files/Image/treesimages/PalaeoGlaciolMaps.jpg" >');
$('#WEee244f5837 .PullZone').click();
//wheelzoom(document.querySelectorAll('img'));
wheelzoom(document.querySelectorAll('#WEimage_view img'));
});
to fix your bug you need to replace:
wheelzoom(document.querySelectorAll('img'));
with:
wheelzoom(document.querySelectorAll('#WEimage_view img'))
So only the images in the #WEimage_view will be affected by wheelzoom
I have one page website which changes URL #id or anchor text on scrolling and on navigation click. I have an image positioned fixed at the center of the site. The site is divided in different sections and the image shows in all the sections. I do not want to show the image on the first section as it is unrelated to the content of the 1st section but will be showed in all next sections. How can I make it work?
What I have tried till now but not working:
$(document).ready(function(){
$(".phone").hide();
var idSample = window.location.href.split("#");
var id = "#"+idSample[1];
if($(id) == "second"){
$(".phone").show();
}else{
$(".phone").hide();
}
});
Rest in Fiddle: https://jsfiddle.net/shubhamjha1000/vh7bu32q/
I don't want that phone to be seen on 1st section but on rest of the sections. Please help me guys!
You can use the answer written in this question to listen to changes in the window see what url you are on and show or hide the phone accordingly....
Example:
$(function(){
// Bind the event.
$(window).hashchange(hashchanged);
// Trigger the event (useful on page load).
hashchanged();
});
function hashchanged(){
var hash = location.hash.replace( /^#/, '' );
//your code
if(hash == "#first") {
// Hide element
} else {
// Show element
}
}
But still even though what you are planning to do will work with that solution I think it would still look bad on the app it self and instead of a hovering phone maybe you can create the phone as an img inside the relevant containers and hide and show with id...
You can simply use a substring on your location.hash for get your hash tag
$(document).ready(function(){
$(".phone").hide();
var id = window.location.hash.substr(1);
if($(id) == "second"){
$(".phone").show();
}else{
$(".phone").hide();
}
});
I have created a side menu bar that menu items has id's 'h1-1', 'h1-2','h1-3' and so on. when first load the page I need to show the 'h1-1' content. so I've written code
$(document).ready(function() {
window.onload = $('#h1-1').show();
});
But here, when I click other menu item first, 'h1-1' content is still show on the page and clicked list item content showing below the 'h1-1' content .
However when I 'h1-1' itself first and then click other list items, it works fine (when I 'h1-1' itself first, 'h1-1' content still showing and then click other list item 'h1-1' content go away and show clicked item content).
I've tried to write hide the 'h1-1' content on the first click but then, 'h1-1' content is not showing even when click the 'h1-1' list item itself.
Can anyone suggest a way how can I solve this..
Fiddle Demo
You are relying on the content of curPage to hide the previous page, but you initialize it to "". Instead, set it to the first page.
var curPage="h1-1";
Updated fiddle
try this... all the codes are there.. I just updated your code.
$(function() {
var curPage="";
$("#menu a").click(function() {
$('#h1-1').hide();
if (curPage.length) {
$("#"+curPage).hide();
}
curPage=$(this).data("page");
$("#"+curPage).show();
});
});
$(document).ready(function() {
window.onload = $('#h1-1').show();
});
http://jsfiddle.net/M3ZhV/454/
I think you are complicating the things. Use a selector to get all elements to hide (jsFiddle).
$(function() {
$('#h1-1').show();
$("#menu a").click(function() {
var curPage = $(this).data("page");
$('.main div.content').hide();
$("#" + curPage).show();
});
});
Just change var curPage=""; to var curPage="h1-1";
$(function() {
var curPage="h1-1";
$("#menu a").click(function() {
if (curPage.length) {
$("#"+curPage).hide();
}
curPage=$(this).data("page");
$("#"+curPage).show();
});
});
$(document).ready(function() {
window.onload = $('#h1-1').show();
});
http://jsfiddle.net/M3ZhV/457/
I have two "ul" list. With javascript a remove childrens from the second list and add inside the first ul list. But while the page is loading the second menu appears unstyled. see here and the web
Here is the code. #main-menu and #section menu are the ul lists:
//dinamyc main menu
if( $('body').hasClass('page-template-templateshome-page-php') ){
$('#section_menu').children().each(function(i, e){
var firstLi = '#' + $('.navbar').next().attr("id");
$('.home .menu-item-home a').removeClass('external').attr( "href", firstLi );
if($('#main-menu div ul li').is($(e).insertAfter('#main-menu ul li:eq(0)'))){
$(e).insertAfter('#main-menu ul:eq(0)');
}
$('#section_menu').css('display','none');
});
}else{
$('#section_menu ').children().remove();
$('#section_menu').remove();
}
CSS:
#section_menu { display:none; }
<div id="hidden-during-page-load">Loading...</div>
$(window).load(function(){
// this will ensure that all content has loaded before the div is shown
$("#hidden-during-page-load").show();
});
#hidden-during-page-load {
display:none;
}
try like this
<div id="mydiv" style="disply:none">somedata</div>
then make that div whenever you want. If you want to show it in page load,
$(document).ready(function(){
//after executing some functions
$("#mydiv").show()
});
Have you tried puting a breakpoint inside your each function?
That'd confirm that that process is causing the glitch. (or you can also add a small delay in it)
Put the breakpoint and do what you've been doing so far, if the menu remains that way until you let it continue, it means you need to change your logic: Hide the menu during processing and only show it when the process is complete.
You could create a css rule to hide the second list for example:
.hidden-list {
visibility: hidden
}
If after loading you want to see the second list, just listen to the ready event and remove the class.
$(document).ready( function($) {
$('ul').removeClass('hidden-list'))
// Do something else if needed
});