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;
}
Related
while click button print the selected html page. Selected html have 5 pages but i want to print first two pages only. is it possible to send first two pages only while clicking the button . window.print() is have any function to send print first 2 page only instead of 5 pages?
The Simple answer is No. Just because there is no parameter in window.print() method, or such a configuration to do so. See the MDN Docs. But there is a simple workaround for achieving the thing you want. What you can do is just set style="max-height: 400px; overflow: hidden" to the body of HTML just before calling window.print() method. Here in sample 400px size is just for demo. You have to find that using trial and error. You also have to remove the style otherwise you won't be able to go through entire page.
You can use ngx-print, which is an angular component that can be used to print parts of a page. - https://www.npmjs.com/package/ngx-print
With ngx-print, you can use something like this :
<div id="sectionToPrint"> your content.. </div>
And then, for the print button, you can use ngx-print attribute like this :
<button printSectionId="sectionToPrint" ngxPrint> Print </button>
This will only print contents inside the "sectionToPrint" id.
Hope this helps.
I made an onclick popup redmore button for my sidebar text widget in wordpress just copied and pasted this code I found here. I did some little changes and everything worked fine.
The problem occurred when I had to make more onclick popups like that one for the rest of the sidebar widgets, exactly the same popup with same values but with different img and content text.
The problem is both "redmore" buttons in the first widget and in the second one link to the same thing - so it will open the same one no matter which redmore button you click -
this is the website check out the first two items in the right sidebar.
Since I don't know much about Javascript, I'm asking you if you can help me changing the javascript tag link in the code in order to link to another different popup and not the same one - and let me understand how to change it since I have to make a few popups.
You should change the Id attribute of the Contents for eg
<div id="light2" class="white_content">
<div id="fade2" class="black_overlay">
for the second pop up and change the javascript of the second read more text to
here
Same should be applied to all other pop ups.
Here i have changed the fiddle
You need to change the id for every popup Like
getElementById('fade')
getElementById('light')
[the first]
getElementById('fadesec')
getElementById('lightsec')
[the second]
And so on.. same thing on html content, don't just copy, change ids
Example two:
<p>This is the main content. To display a lightbox click here</p>
<div id="lightsec" class="white_content">This is the lightbox content. Close</div>
<div id="fadesec" class="black_overlay"></div>
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!
I have some "Learn More" links on my Home page, all of which correspond to different sections of content that is on the More Info page. These different sections of content are all hidden using display: none.
What I'm wondering is if there's a way to make it so that when I click a particular "Learn More" link, the user will be sent to the More Info page, and the section of content corresponding to the Learn More link they clicked will be shown.
I can't think of a way to achieve this, but I'm hoping it will be possible, perhaps using JavaScript.
EDIT:
The code I currently have is nothing special. Four <a> links on the Home page, then on the More Info page, four divs that are all initially hidden using display: none.
The solution ended up being fairly simple, I did what is described in the top answer of this question: Getting URL hash location, and using it in jQuery
Learn more
<script>
function showContent(id) {
$("#"+id).show();
}
</script>
I think it is possible.You can take the information on a div,and then you click "Learn more",show the div.
In this way,you even needn't a hyperlink,just a click event,like the code upstairs.Of course,this div was hidden before.
One way you can achieve this would be to add a hash to that link with the id of the section you want to show, like this: Learn More. Then just check for it in window.location.hash on the /moreinfo page and show the div.
You have to do it this way: try to use named anchors.
first:
Learn More
when use clicks this link user will navigate to particular page with different sections.
second:
on this page suppose you want to show the 3rd section:
.....
<a name='section-3'></a>
<h1>Your section-3</h1>
In your case divs are hidden then use js or jQuery for this:
As you will get a hash in the location url then use .substr()' and.indexOf()` javascript methods.
try to put this script on those page where you are having your hidden divs
$(function(){
var url = window.location.href;
var obj = url.substr(url.indexOf('#'));
$(obj).show();
});
I have a webpage that has a list of anchors on it which use clearbox3 to display them as a gallery. Only the first anchor has a textual link to click "View Photos (3)". The others are just to get the images into the clearbox gallery. And that works fine. What I need is a way to bring up the clearbox image gallery from the user click of another control. I'm currenting trying to do it from an asp.net ImageButton control (maps to input tag), but have also tried to just use an anchor too without luck.
The anchors for the clearbox image gallery look like this:
<a id="photoLink" href="http://tempo5.sandicor.com/SNDImages/221/071064797_101_12.jpg" rel="clearbox[gallery=929 Border Ave, Del Mar, California, 92014,,tnhrf=http://tempo5.sandicor.com/SNDImages/221/071064797_101_12.jpg]">View Photos (6)</a>
My "other" control (currently an asp.net ImageButton --> maps to a an input control looks like this:
<input type="image" name="ctl00$ContentPlaceHolderCol2$mainPropertyPhoto" id="ctl00_ContentPlaceHolderCol2_mainPropertyPhoto" src="http://tempo5.sandicor.com/SNDImages/221/071064797_101_12.jpg" />
And finally, here the javascript I tried invoking from onClick attribute in ImageButton/Input control that didn't work with clearbox (and is not cross browser supported anyway):
<script type="text/javascript">
function clickPhotoLink()
{
document.getElementById("photoLink").click();
}
</script>
My question is this: how do I bring up the clearbox gallery I setup using the list of anchors above from another control such as an input control? I already tried using the onClick attribute (same as onClientClick property for asp.net) on the input to run a script, but had no luck there either invoking a .click() on the the first anchor in the list, nor was I able to rebuild another gallery exactly the same using the "CB_Open('href=mycontent,,parameter2=value 2,,parameter3=value 3,, ... ');" syntax defined on the clearbox page. The .click() won't work since it a) its not consistent across browsers, but b) more so because it's not actually the same as the user clicking the link. Also, using the CB_Open script to rebuild a duplicate gallery didn't seem like a very ideal option (nor could I get it to work) and the .click() just doesn't work with clearbox likely since its not actually the same as a user click.
So, I could change the ImageButton (input control) to be an anchor instead and set the href to the first in the gallery I'm displaying; and then set the other list of anchors to start with image #2 in the list. However, when the user clicks the textual link "View Photos (3)" it will bring up clearbox on the index of the 2nd photo and not the first. So that works, but isn't an ideal solution either since I need it to come up and show the 1st photo (from both places) which wouldn't make sense for clearbox since the href of the anchor points to image 2 and not 1.
Basically, I am wondering if there is a way to bring up my already defined/created clearbox gallery associted with the list of defined anchors on page from another control (possibly even another anchor, but without images from gallery to avoid duplication and/or issue outlined above)?
Any help is greatly appreciated.
stackoverflow answer:
Solved. Instead of using an input control to initiate the click from, I switched it to an anchor control (with an image inside) and set the href attribute to execute the script directly instead of messing with the "onclick" and "rel" (used by clearbox) attributes to bring up the clearbox image gallery.
The resulting html is this:
<img src="http://tempo5.sandicor.com/SNDImages/221/071064797_101_12.jpg" class="mainPhotoImage" />
My asp.net code behind is this:
HtmlAnchor mainPhotoAnchor = new HtmlAnchor();
mainPhotoAnchor.InnerHtml = "<img src=\"" + arrPhotoUrls[0] + "\" class=\"mainPhotoImage\" />";
mainPhotoAnchor.HRef = "javascript:CB_Open('gallery=" + displayAddress + ",,href=" + arrPhotoUrls[0] + "');";