On link click new image with text appears - javascript

I am trying to create a page where when a link is clicked the corresponding image appears with a clickable link below it that will say "Click to view Gallery"
So far I have the code written to change the image using an 'onclick' command, but I am unsure how to add the text below the image.
Here is my website with the current code now.
JS:
function changeImage(element) {
document.getElementById('imageReplace').src = element;
}
HTML:
1025 W 3rd
959 - 965 Schrock Rd
7099 Huntley Rd
So the text that reads Click to view Gallery of Property is what I need to be added beneath the image. That link needs to be a unique link that leads to the corresponding property based on the 'onclick' link that the user selects in the left column.
So for example, the user selects 1025 W 3rd in the left column and it's corrisponding image shows up with an option for the user to view a gallery of that property alone (which will be a separate web page)
I am not sure what my next steps should be. Is it better to change the links to and 'onclick change div' type of command?
Thank you so much for your help.
-Kas
EDIT
I added my current code so any reader can better understand what I currently have.

You need to add a link bellow your image and add it an id.
<div id="divright">
<img src="http://new.oxrealty.com/wp/wp-content/uploads/2015/08/CommercialPropertiesDef.png" alt="Images" id="imageReplace">
Click to view Gallery
</div>
Then change your function changeImage to accept an additional argument for a link, and it should also change the href attribute of the link.
function changeImage(image, link) {
document.getElementById('imageReplace').src = image;
document.getElementById('linkReplace').href = link;
}
Then you change the links to call the updated function with the link
onclick="changeImage('CUSTOM_IMAGE', 'CUSTOM_LINK');"
Example jsfiddle

You're fine with your code as you are. To change the value of a div with an id of "text" for example, you would just do in your JS:
document.getElementById('text').value = 'Type the new value here';
Hope this is what you're looking for!

Related

Google Tag Manager - Custom Variable - Get Header text when click a link

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.

Get link of a button and assign to other in jQuery

I am working on an ecommerce site, I have a page that shows the products grid. There are two button side by side. One contains link to the post and other opens a dialogue box with textarea inside. (see picture)
Image 1
Image 2
Now, what I want is when I click the GETLINK BUTTON button it must take the href attribute of the VIEW BUTTON and populate in the textarea. But what I get in the link of 1st product only even if I click the other Get Link Buttons.
Here's the JS code:
function opengetlink(){
var sacprodlink = document.getElementById("sac_prod_link").href;
jQuery("#sac_link_text").html(sacprodlink);
}
Help would be appreciated, thanks in advance.
EDIT: Solved
$(".open").click(function() {
var link = $(this).closest('div.viewbutton').find('a.btn-link').attr('href');
$("#link_text").html(link);
});
Ids are given to HTML elements to make them unique. Since you have many elements of the same kind and want to perform the same operation on each of them, you should use classes. Give your View and Get Link buttons a class.
$(".sac_open_link").click(function() {
var link = $(this).siblings(".sac_prod_link").href;
$(this).html(link);
});

Information shows in a div while pressing button from another div without loading page by jQuery & PHP

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

Get Image URL from site

currently I am working on a print button for images which are shown over an overlay. The button itself is already displayed, but I would need the link to the image. The problem is, that there are more links/overlays of this type and that I am really bad in javascript.
Also, the code from the overlay is at the very bottom of the site, so I would need to get the URL from above.
The code, which is clicked, looks like this (where .$largebild. is the url of the image from the database -> I have no access to it at the bottom)
echo '
<div>For the menu of the week click
<span class="zoom-enabled" zoom="<div class=\'overlayplakat\' id=\''.$largebild.'\' name=\'nameOfElement\' style=\'background: url('.$largebild.') no-repeat center center; background-size: contain;\'></div>"> here!</span>
</div>';
What I have planned is, that the script function should get the id, which is the url, where the name is the element which was clicked.
The problem of all that is, that it should be one function for the print button to know where it should get the link and print it like that:
<div id="overlay-print">
<a id="link" href="javascript:getImageLink()" target="_blank">
<i class="icons overlay-button-size">ξΆ­</i>
</a>
</div>
I thought there about parameters and probably a help function to identify which element was clicked.
I would be so greatful for help. If you need anything else, just ask.
PS: You should know, that I have posted the same yesterday, but yesterday I only needed one link which worked fine for me. Here is the link: Link for printing image
If you don't want to pass parameters and you want to inline your javascript like your post suggest I think you have at least two options:
Use the DOM structure to figure out what image you want to print.
Mark the appropriate image when it's clicked and print the image with the marker when "print" is clicked.
For option 1, if you have a DOM like:
.div
#url.overlayplakat
%button.print
When the user clicks the print button you can make your javascript search of an adjacent .overlayplakat class pull its ID to get the printable url.
Like so:
function getImageLink() {
var url = $(this).siblings('.overlayplakat').attr('id');
return url;
}

pass data from popup gridview to parent page

the explanation given here http://wiki.asp.net/404.aspx?aspxerrorpath=/themes/fan/pages/page.aspx/282/passing-value-from-popup-window-to-parent-form39s-textbox/
is exactly what I want , but Its not giving the output and parent page despite doing exactly as explained ,
can anyone please send sample website with northwind data base ? no need of mdf file ,just a tested demo I will attach Northwind .
The task s simple , In pop up window there is a grid with some databound column and one with button , my task is when buton is clicked it must return text from respective grd row to the parent page'control (any)
Maybe is not working to you because on the sample is hard code the button id, and this logically because on the popup window did not know how the button have been render.
getElementById("ctl00_ContentPlaceHolder1_TextBox2")
So ether correct this id to make it as its appear to your page, ether make the control id on TextBox2 static so is not change, and get it by name.

Categories

Resources