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!
Related
I have list of RSS feed (rss page) in mobile app. I want to open each feed link once clicked, in different tab (in Android) and in iOS want to open _blank. Below code works fine for me.
First issue is I need to click once in empty place on rss page, then it works; otherwise app replaced itself with the external hyperlink webpage.
Second issue as many times I click anywhere in rss page or rss links; on next rss click it opens that many tabs. (e.g I click 3 times in empty space in page and already 2 times visit rss links; on next hyberlink click, it tries to open 5 tabs).
index.html
<script>
$(document).click(function(e){
$('a').click(function(){
var myurl= $(this).attr('href');
if(myurl.indexOf('/') > -1)
{
//alert('linked found');
if (typeof navigator !== "undefined" && navigator.app)
{
navigator.app.loadUrl(myurl, {openExternal: true});
}
else
{
window.open(myurl, "_blank");
}
myurl='';
return false;
}
});
});
$(document).ready(function (){
$("#btnnewgrant").click(rssfeedbtn);
});
</script>
HTML:
<div data-role="page" id="rssfeed">
<div data-role="header">
<h1>Grants New Opportunity List by Agency</h1>
</div>
<div data-role="content">
<div class="myfeedheading">Grants New Opportunity </div>
<div id="busy1" style="color:#000000"><img src="ajaxloader.gif"></img>
</div>
<div id="myfeeddiva" class="myfeed"></div>
</div>
<div>
feed.js
function rssfeedbtn()
{
$('#myfeeddiva').empty();
$.mobile.changePage("#rssfeed", {reverse:false, transition:"slide"});
var rssurl='http://www.ddd.ddd/rss/asdd.xml';
$.get(rssurl, function(data) {
var $xml = $(data);
var mytext="";
$xml.find("item").each(function() {
mytext+='<a href="';
mytext+=$(this).find("link").text();
mytext+='">';
mytext+=$(this).find("title").text();
mytext+='</a>';
mytext+='<br>';
mytext+=$(this).find("pubDate").text();
mytext+='<br>';
mytext+='<br>';
});
$('#busy1').hide();
$('#myfeeddiva').append(mytext);
});
}
You attach click event handler in another click handler attached to the document. So when you click anywhere then a handler is attached to your links. You can have any number of handlers so if you click 10 times anywhere then there will be 10 handlers on your links and code will run 10 times on click on a link.
You need to change
$(document).click(function(e){
to
$(document).ready(function(){
or shorter
$(function(){
Edit: If your links are created dynamically then you need to use .on instead of .click.
Instead of:
$('a').click(function (e) {
use
$('body').on('click','a',function (e) {
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/
I'm trying to figure out how to make the javascript open the correct window.The div class .show within my javascript controls the content I want to open. However it is having trouble if multiple .show are being used.
Within one page I may have many of these .show classes and according to which one is pressed I would like that one to show.
For example
<span class="Show">Show</span> -
<div class="show">
Content 1
</div>
<span class="Show">Show</span> -
<div class="show">
Content 2
</div>
So if I click on the top show I will see Content 1 and if I click on the second I will see content 2.
At the moment with the current code provided when clicking the first show "content 1" a window opens with Content 1. If I click the second Content 1 appears and not Content 2.
Below is the javascript.
<script type="text/javascript">
$("a").click(function () {
var html = $(".show").html();
var my_window = window.open("", "mywindow1", "width=350,height=150");
$(my_window.document).find("body").html(html);
});
</script>
Any help would be greatly appreciated :)
I used this fiddle to get to where I am : http://jsfiddle.net/A72TH/
Well this is pretty fragile but you can accomplish it as follows:
var html = $(this).parent().next("div.show").html();
The working sample is here: http://jsfiddle.net/RV86q/
Given your example, you'll want to first navigate to the parent element, then to the next item with a class of "show".
Here is a fiddle example: http://jsfiddle.net/A72TH/
$("a").click(function () {
var html = $(this).parent().next(".show").html();
var my_window = window.open("", "mywindow1", "width=350,height=150");
$(my_window.document).find("body").html(html);
});
Try this
$(".window").click(function () {
var html = $("#"+$(this).data('id')+"").html();
var my_window = window.open("", "mywindow1", "width=350,height=150");
$(my_window.document).find("body").html(html);
});
FIDDLE
Well it seems I know enough Javascript to hurt myself so I come asking help from you guys here. Here is what I am attempting to do and my issue.
I have two forms and only one will be filled out depending on the users choice. They will click one button or the other. When they click the button the form fades in and the button changes classes (goes from a light button to a dark button) Here is were I am running into issues. First I cannot get the form to fade in at all and the buttons will only change classes if I click them twice not once.
One other thing I am not sure how to go about is if I have say form 1 chosen but I meant to click form 2 then I want form one to fade out, form 2 to fade in and the buttons change accordingly. Here is my Code:
JS
<script type="text/javascript">
var $j = jQuery.noConflict();
var $jtest1 = $j('#test1');
var $jtest2 = $j('#test2');
$j("#button1").live('click',function(){
//Fade out form if shown and fade in form selected
$jtest2.fadeOut("slow", function(){
$jtest1.fadeIn("slow");
});
$j('#button1').live('click', function(){
//change class from light to dark
$j(this).addClass('dark_button').removeClass('light_button');
}); //I need to change this class to light if
// button 2 is selected and change button 2 to dark
});
</script>
HTML
<p class="light_button" id="button1">Test 1 </p>
<p class="light_button" id="button2">Test 2 </p>
<div class="hide" id="test1"><p>TEST</p></div>
<div class="hide" id="test2"><p>TEST 2</p></div>
Note: class="hide" is style="display:none"
Thanks for any help because I am a but stuck and not sure to go about this. Also please give me an example because I do not always follow when someone say change this to that etc.
Look at the code below, added comments on why
$j("#button1").live('click',function(){
//Fade out form if shown and fade in form selected
$jtest2.fadeOut("slow", function(){
$jtest1.fadeIn("slow");
});
//The following is inside the click so I do not get added until the first click
//and added after every click so I multiply!
//Hence why it takes 2 clicks
$j('#button1').live('click', function(){
//change class from light to dark
$j(this).addClass('dark_button').removeClass('light_button');
}); //I need to change this class to light if
// button 2 is selected and change button 2 to dark
});
You should be doing something like this
$j("#button1, #button2").live('click',
function(){
//figure out what button was clicked.
if(this.id === "button1"){
var btnA = $j(this);
var btnB = $j("#button2");
var divA = $j('#test1');
var divB = $j('#test2');
}
else{
btnA = $j(this);
btnB = $j("#button1");
divA = $j('#test2');
divB = $j('#test1');
}
//make sure it is not already active, no use to show/hide when it is already set
if(btnA.hasClass('dark_button')){
return;
}
//see if div is visible, if so hide, than show first div
if(divB.is(":visible")){
divB.fadeOut("slow", function(){
divA.fadeIn("slow");
});
}
else{//if already hidden, just show the first div
divA.fadeIn("slow");
}
//Add and remove classes to the buttons to switch state
btnA.addClass('dark_button').removeClass('light_button');
btnB.removeClass('dark_button').addClass('light_button');
}
);
jsfiddle example
My prime goal is to have a Right Mouse Button click detection for each SVG element (created with Raphael JS lib), my html code for this looks very straightforward:
<head>
...
<script type="text/javascript" src="/side_media/js/raphael.js"></script>
<script type="text/javascript" src="/side_media/js/MyScript.js"></script>
</head>
<body>
...
<div id="canvas_container">
</body>
and my JS contains
window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 900, 400);
...
surface[1] = paper.path('m150,150l40,0l0,20l-40,0l0,-20z');
surface[2] = paper.path('m150,150l-10,-20c20,-17 40,-17 60,0l-10,20l-40,0z');
surface[3] = paper.path('m190,170l10,20c16,-20 16,-40 0,-60l-10,20l0,20z');
surface[4] = paper.path('m190,170l10,20c-20,17 -40,17 -60,0l10,-20l40,0z');
surface[5] = paper.path('m150,150l-10,-20c-16,20 -16,40 0,60l10,-20l0,-20z');
for(i=1;i<=5;i++)
fill[i]=surface[i].attr({fill:'#FFFFFF'});
//each element has its own url activated on click (LMB)
toothfill[1].click(function (){window.location="http:...";});
...
}
I have also tried many (available on web as examples) JS scripts which show some menu on RMB click and it looks that it would be possible to restrict this RMB menu only to some selected html DIV class (please warn me if not!), so my problem right now is: howto put those "fill" array elements into seperate DIV which would share the same class?
If there is any other easier way to do it - I am open :)
thanks a lot in advance,
Borys
I would like to know is it possible to put each SVG element into a separate DIV, just ? I would like
I don't understand why you'd need to wrap the svg in a div just to check which mouse button was pressed.
Try something like this instead:
toothfill[1].click(function (evt){
if (evt.button == 0) {
// left mouse button pressed
}
else (evt.button == 1) {
// right mouse button pressed
evt.preventDefault(); // prevent right-click menu from appearing
}
});
Here's the reference for the click Event object from DOM 3 Events. And read up on Event.preventDefault if you don't know what it is.