I have 4 forms on my contact page and each of them is showing by clicking on a independant div block.
( For example : "Become Partner" form is showing when user click on the div block with ID "partner-div" )
In order to avoid that the user has to click everytime on the correct div block to see the concerned form, I would like to ensure that the form is displayed when the page loads by clicking on a div block or button on the previous page.
I know i've to do this with document.referrer but i'm not very good with Javascript.
Basically, this is the kind of script i'm looking for :
If user clicks on the button with the ID "blabla" on the previous page, then click on the button with the ID "showform" on the current page"
I hope you've understand my issue 🙏
Related
I'm having an issue right now with getting the right element for a variable.
Here is what I want to accomplish
When a user click on a link from the sidebar, I want the following info :
Click text
Click URL
Click ID
Click Element
Click Classes
Page URl
At this moment I can have all but Click Classes which is empty ""
But I also want when I click the link or the button, I also want the title that is in the elementor container.
Image link : https://i.imgur.com/NoDv2wh.jpg
I already setup my TAG and Triggers
So I tried following some of the info I found one the forum, but clearly I have no idea how to accomplish that and I search a lot on Google without clear indications.
Here the code for my custom JS
function() {
return {{Click Element}}.closest(".elementor-widget-container").find('h4').text();}
Right now, I just want to be able to create a custom variable to get the header text when I click on a button or a link.
At first I apologize for not having the code of my desire & I've no idea how I'll ask the exact question by focusing any specific keywords.
However, I want to show my product information in an area(div) whenever I click a button in another area(div). & The work should be done without refreshing pages.
Again I apologize for that I've not the code. But I can provide an
image and hope you'll understand my desire
Example: Whenever I click on angry burger, the price and quantity should be shown in the right(California Fried Chicken) area. And multiple selecting product should also work one by one. After that I should be able to submit product information bu pressing submit button where a PHP operation should be done.
I want to do the whole task by jQuery & PHP
Thanks
You can achieve this by setting up click listeners in your javascript/jquery code and assign them to the ids of your pictures or fields. For example you can assign an id to an tag like below;
<p id="div">Hello world</p>
And then set up a click event in your jquery code to execute a function whenever that tag is clicked
$( "#div" ).bind( "click", function() {
var tag = $(this).html(); //get the value of the tag
alert(tag);//this will display Hello world
});
You can do this for any tag and retrieve its value or contents or anything and carry out an activity like changing the display of another element as below
$("#change").append(tag) //this will change the display of the tag with id change
Please ask if you have any questions
I am having an issue of hiding and displaying content on a separate page if a certain radio input has been checked. Currently I am trying to hide special content if the user hasn't checked one radio input. I have code that works for that page which switches the banner to allow them to go to the page after they complete this task, but when I go to the next page the content doesnt show up.
Here is my current script for the banner to hide and show based on the radio input being checked.
if ($('input[name=sexo-field]:checked').length > 0) {
$("#pdfFlipButton").show();
$("#pdfFlipButtonOff").hide();
} else {
$("#pdfFlipButton").hide();
$("#pdfFlipButtonOff").show();
}
But how would I go about showing or hiding a div on the next page based on these parameters?
This is not easy and you have 3 not good ways:
The page that must be affected, is a child page and send data from parent page to child page.
In both page create ajax functions, send direction from one and another must check the server in a few seconds:
setInterval(function(){
//if radio checked
}, 3000);
As mentioned in comments, submit radio button and refresh second page.
As #adeneo said, you can wrap the radio button in the form element and after submitting that form, catch values on the next page which the form points on. Or as #Michael Alexander Montero said, you can use sessionStorage which I would rather recommend.
Here is the documentation of how to use sessionStorage. In your case it would be for example:
sessionStorage.setItem('radiochecked', true);
And in the next page you will add following line:
if(sessionStorage.getItem('radiochecked') {
// display the panel
}
I have an option in my page where in I can add new div on button click.
But when ever I add new div the page scrolls back to top, instead of staying focused on new item.
How can i make page stay focused on newly added div??
You can use .focus().docs are here.hope that helps.
As if that button is created using <a href="#"> tag then whenever you click on it due to href="#" it will automatically go to top of the page.
So you need to give either "ID" of that new appended DIV or "javascript:;".
If you passed ID of the DIV then that DIV focused and if you given "javascript:;" then that page will be there only it will perform the action whatever the action function written on click of it.
OR
If that DIV is loading after some service call then you need to handle it through JS you can use event.stopPropagation() function.
If that button is simple <button> element then add an attribute "type" as <button typr="button"> default type is submit so some times its perform some action if that button is included in some <form>
I am assuming the scenario because that Js Fiddle link is not accesible.
Hope it will helps.
I'm using Javascript/Jquery to have a button toggle which div is displayed in the user's window. I have my initial background div #container which gets toggled with a different div if the user clicks on a certain location. A back button is toggled on once the new div is displayed. I want the back button to switch the div back to the initial #container if it is pressed. The back button's display should be toggled off again if this happens.
Since I have different divs that the back button shows up in, I need to determine which background div the user is viewing in order to toggle that specific div off and the #container back on. The container will not display again if I do not toggle the current div off.
Here's my code for an example of one instance:
JS:
$(document).ready(function()
{
$("#backButton").click(function(e)
{
if(THE CURRENT DIV IS REGION 1)
{
$("#container").toggle(); //toggle the container on
$("#region1").toggle(); //toggle region 1 off
$("#backButton").toggle(); //toggle the back button off
}
});
});
Obviously, I do not know what code to use to determine which div the user is looking at. I tried if(document.getElementById('region1');) but it didn't work; I didn't think it would, but that's the direction I'm going as to how to determine the current div.
Any help would be greatly appreciated!
if($('#region1').is(":visible")){ etc... }
If you are talking about a back button located in the DOM inside the div region1, you could use:
if($(this).parents("#region1").length > 0)
Which says "if the number of parents of this button containing ID region 1 are non-zero". For more information see parents. In general the traversing functions in jQuery will be helpful to you.
This might be what you're looking for:
http://api.jquery.com/parent-selector/
If all you're doing is switching two DIVs back and forth, you don't even have to check which DIV is currently displayed, because the .toggle() function should do that for you out-of-the-box.
Consider you have two DIVs, make sure one is hidden and one is shown, like so:
<div id="region1">foo</div>
<div id="region2" style="display:none;">bar</div>
Now, when you click on the button, you just have to call .toggle() on both of them.
$('#backButton').click(function(){
$('#region1, #region2').toggle();
});
You can even get by with using only one button to do that, and just switch the text inside the button if you'd like.
// inside the click handler
$(this).val( $(this).val() == 'Next' ? 'Back' : 'Next' );
Full code example here: jsFiddle example