I'm having a bit of an issue figuring out a very simple interaction.
Some Context:
I'm working on a website that showcases some products in a grid and when clicked, a Lightbox pops up with the information of the product..pretty simple! Roughly my markup/script:
<img id="1234" src=".../blah.jpg"></img>
$( img ).click(function() {
// open (this) lightbox
// etc. etc.
});
Now I'm trying to implement the search functionality, which exists obviously in another page. The search reutrn a list of products each one with a path such as:
Product 1234
So if I click the item, it will take me to the correct page where the item exist and since I'm including the anchor link, it will kind of place it visible to the user. This works fine.
My question is, how can I make the Lightbox open automatically after being directed from the search to the actual category page where the product exists?
This seems to be super simple, but for some reason I can't manage to figure it out! Any help would be really appreciated!
Thanks!
So when the dom is ready on the category page, you wan to check the url to see if an anchor exists. This will mean that they have arrived via the search results page.
reference:
How can you check for a #hash in a URL using JavaScript?.
Something like this:
if(window.location.hash) {
var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
alert (hash);
// hash found
// open (this) lightbox
}
If it exists, get the product id from the hashtag and trigger the lightbox functionality
Related
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've looked through the jQuery Mobile documentation to no avail, so hopefully someone here has solved what I so far haven't found a way to.
I have a jquery mobile page, served in the usual way (call it 'item display'). It contains info about a particular item. There is a button on this page that takes the user to a page in which he/she can take notes (essentially a big textarea) on the item displayed. Clicking 'save' on the notes page POSTs and redirects back to the item display page.
My issue is that once the notes have been saved, I would like the 'Back' button on the item display page to link back to the page the user was at before first visiting the item display page, NOT the default behaviour of taking the user back to the notes page (since it was technically the last page the user was on).
So, current behaviour:
item list page -> item display page -> click 'Edit Notes on item' -> notes page -> click 'Save' -> item display page -> click 'Back' -> notes page.
I want to replace the last step with clicking 'Back' to take the user to the item list page.
Any such luck? Thanks for any and all guidance you can provide
You can change pages without keeping them in browser history like so:
$.mobile.changePage('#page', {reverse: false, changeHash: false});
this is based on this answer: Jquery mobile, remove previous page
I have been in the same issue as you and I have created an approach, the only one that worked. If someone knows something better, it would be greatly helpful! So, let me explain how to solve (it is a bit complicated, but worked for me).
You will need to override the back button to roll back the history by X pages in the html you want, for example:
$(document).ready(function() {
$('[data-rel=back]').click(function() {
window.history.go(-4);
return false;
});
});
But, the 4 is actually a navigation counter variable in session.
If you use jsf, it would be like this:
window.history.go(-#{mySessionManagedBean.navigationCounter});
Also, you need to initialize and increment this each page change.
If you use jsf, it would be like this:
<h:commandButton ...>
<f:setPropertyActionListener target="#{mySessionManagedBean.navigationCounter}" value="#{mySessionManagedBean.navigationCounter + 1}" />
</h:commandButton>
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] + "');";
I have Facebook iframe app where I am pulling content with JSON and representing it in a list with search criteria.
On item click new content shows on the same page (using ajax), and that page shows more info about item. I want to add a LIKE button for every clicked item.
But it must be a different URL so I can publish it on my FB wall. So when I check link from Like button on wall, it will redirect me on that special item.
Here are few issues:
1) How to define Like button for every item?
<div class="fb-like" data-href="LINK FOR LIKE BUTTON" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" data-colorscheme="dark"></div>
Here is LIKE button, I need to specify different data-href for every item.
2) I need to send some parameters to url. Let's say when clicking on item, I should send item id to URL. Right now I can send item id to my URL but it is doing just in my iframe -- not in facebook URL. How can I do this?
I think second problem would give an answer for my first problem.
Edit: I am doing this using jQuery.
edit2:
so, i am using jquery for my site, pulling content with JSON and representing it with html and jquery, i have, it is all the same page, but on click i hide some contents and show another, so my main content is a list of items, click on item i hide main content, and i show item info content
so, it is all one page, so it has the same URL (main content, item content,... all the same URL)
so for adding LIKE buttons for every item, i need to make a difference between those items, so i done this
'window.location.href=window.location.href + "#id=" + propertyid;'
so right now, every item has its own URL, which i done manually, so right now every item has own URL which i could use for LIKE button
but, when i alert this new window.location.href is seems all right, i get this new location with #id=12345 included, but when i try to send that location to LIKE button data-href it is always just the main location, without this new part includind item id #id=12345
Yes, you can create FB Like buttons for "items" shown on dynamically created screen content (eg Ajax popups).
Issues:
Individual item urls
FB demands a "social graph endpoint" for each item that can be liked. So you also need to support a url which returns only the "item." This is the url for the individual item. It is also the url that a FB viewer will click on if they want to find out more about the item.
Example: a page shows a list of articles. There is an individual Like button next to each article. When a person "Likes" article B, it is shown in their FB stream. When they click on "Article B" in the stream, it should go to a page that only shows article B.
Also, the url for just article B will be queried by Facebook to obtain the FB meta headers for the individual item (image, classification, etc).
Parsing the new dom for FB items Depending on which method you use for adding FB like buttons et al, you may need to tell FB to explicitly (re-)parse the new parts of the dom that you just added dynamic content to. (Your pop-up.)
Since you know the element that you added the popup to, there is no need to tell FB to reparse your entire dom. Tell them to parse starting at the beginning of your newly added/changed element:
Code I use:
if (event_data) { // event_data was received, show it
panel.setBody(event_data); // set the pop-up's body
if (!this.ie && typeof(FB) != "undefined" && FB.XFBML)
{FB.XFBML.parse(this.panel_el);} // Parse FaceBook markup
....
Docs from FB on this:
http://developers.facebook.com/docs/reference/plugins/like/
http://developers.facebook.com/docs/opengraph/
http://ogp.me/ # FB site about "Open Graph Protocol"
Place this in a for loop, and you should be fine.
var elements = $("#divId").html();
$("#divId").html(elements + "like button code");
$("#divId.fb-like").attr("data-href", "what you want to link to");
See .html() and .attr() specs.
I want to create something like this:
Clicking a "button" in an HTML page will direct the user to another HTML page, and make a "hidden div" in that other page shows.
How to make this with jQuery?
Here is my code:
• PAGE01.html (where the "button" resides):
(HTML code & jQuery code):
http://jsfiddle.net/pDpeN/
• PAGE02.html (where the user will be directed and the "hidden div" resides):
(HTML code):
http://jsfiddle.net/kdHrh/
Thank you in advance.
You can just pass a parameter to URL (e.g. www.example.com/?loaddiv=1) and then check for loaddiv=1 using simple jquery code on the next page (Search on Google).
Best I can think off based on your example is to make call to second page with anchor
document.location.href='PAGE02.html#'+x;
Second page will be than PAGE02.html#hiddenDiv. Than parse value of hash from jQuery on second page and show div with same id. See here how: Getting URL hash location, and using it in jQuery
Second line of your script on first page ( $('#'+x).slideDown(200);) can not in any way do that, you must do it on second page.
But I think you should rethink your approach, in your example all should be probably done in a single page.
This will open the redirect url:
<a href="javascript:q=(document.location.href);void(open('http://example.com/#redirect,'_self','resizable,location,menubar,toolbar,scrollbars,status'));">click here
</a>
for second window:
$(function(){
if(window.location.hash.replace('#','') == 'redirect'){
$('#hiddenDiv').slideDown();
}
});
here i use a hashing when the url is visited by button.