Guys I was wonder if I am doing something in an inefficient manner. Currently I am doing a
<body onload='javascript: showHide(...etc..)'>. In the JS function I basically hide elements based on class name I gave them. But I have realized when I visit my website, just for just a short moment the elements that the JS showHide() function is intended to hide appear until the body of the page completely loads. Hopefully for my first website, intended to include in my resume, will not cost me that possible job opportunity.However, is there a better way to do what I am doing? I mean, I could just create completely dedicated pages for logged in users that are identical to the pages that non-subscribed users can view except for a few different elements; such as, links to view their account info, shopping cart, a log out link/icon, and a "logged in as: user name" display. But I thought that would be too many web pages. Anyway thanks guys for any help.
Did you think of doing it the other way around? Hide elements first and then show elements based on a class name? This way, the elements will be hidden until the body of the page is loaded.
Related
I have a setup where I display a list of buttons and clicking on the buttons triggers a function that contacts a firebase database and gets the contents of a 'slide' that is to be shown to the user. The function then clears the content of the page and then creates elements from the data acquired from the database.
Now obviously, when I press back browser button once I've replaced the content, it won't take me back to the previous content. But I believe that my user's experience will be much better if it actually took them back to the list of buttons. I have two faint ideas on how to go about solving this problem but I'm lacking in specific details of how I can go about it.
Possible Solution 1:
Some way to dynamically create a new page using javascript and then serve it to the user.
Possible Solution 2:
Some way to simulate that the page has changed location. Maybe using anchoring links.
Let me know if you have any other solutions in mind or if you know how I should go about implementing these. Your help will be much appreciated. :D
I have an application that navigates mostly with AJAX, and a section where a user can view information. I would like to track how long users are viewing different pieces of information. I want to assume that as long as they have the information loaded in the <div> they are "viewing" it. However when the user click on a link to "go to another section of the app" the <div> gets loaded with different content, the page doesn't actually redirect.
Does anyone have a solution for this, or at least some thoughts to help me see something I cannot see right now?
Thanks
Most analytics software will allow you track this. I have some experience with Google Analytics and it's something like:
ga.track("my-event", my_data);
Setting up a timer shouldn't be too hard. Put that code in the routine that handles content un/loading.
You should call some function when you update your content.
Since there is no "onchange" event for divs, you'll have to call your function after the ajax process: See this answer for more info.
However, if your content doesn't change according to ajax calls, you should trigger some event when your div changes.
Hope I helped you: without any code fragment I can't do more!
Does anyone have any idea how to achieve this? On our site we prefer not to have pagination and have all products on one page, however we have seen it done on other sites where as you scroll, the products appear into view.
This is an example of our site in a category with a lot of products: http://goo.gl/OiHIFO
If someone could help/advise or offer a link to something which will achieve this for us i'd appreciate it.
The way you could do it is using similar methods to pagination where you load the first 50 but when you get to almost the bottom it would then make an ajax call and pull the next 50.
Those next 50 would then be appended to the results or faded in using jQuery.
Its better to load the content as you need it rather than loading everything at once but only displaying the actual product when you scroll to it
I'm making a webshop for a school project, and i've got an issue with the shopping cart. because the shoppingcart & webshop are in different iframes on the main page(got quite a few images on main page, don't want to reload that, thats why it's in iframes).
Basically, my issue is that when something is selected in the webshop, the shopping cart doesn't update untill the entire webpage is reloaded. I'm storing shopping cart info in an array in a SESSION variable. basically, what i want is to reload the iframe of the cart when the session variable changes.
If the answer involves anything besides PHP/javascript, please give a clear explaination/example code, i've never used anything outside of PHP/js/html/css before. Thanks in advance :) been stuck on this for a few days now :S
Create a javascript function to fire the following code when a user adds something to their cart:
document.getElementById('some_frame_id').contentWindow.location.reload();
I don't have the code in front of me, but I've done something similar where in the parent you create an event listener on "message" then in the iframe you can call parent.postMessage, works as long as they are on the same domain
Although APAD1's answer directly addresses what you asked, it sounds like your program has some deeper design problems. Using iframes for content from the same site (ie within one domain rather than content from a separate site) is bad practice.
Consider instead displaying content in <div>s with unique ids, and using javascript to update the contents of those divs. If you're using PHP on the back end, you can create a "page" that only generates the cart contents part of your page. Not only can you include it in each page without changes, but you can load it directly with javascript and insert the result into the current page to update it in place.
Whenever your user adds an item to their cart, you can call the javascript method that refreshes the <div> with the cart's contents.
I want to integrate a function into my website, whereby if a user hovers their mouse on the name of a product, a box appears which will show the details of this product. For this I would preferably like to use either CSS or Javascript, I am not really sure how I would go about doing this though. Can anyone offer me some guidance please? I am currently using the JQuery UI with essentially the same code as the shopping cart code seen here :
http://jqueryui.com/demos/droppable/#shopping-cart
Thnk you very much for the help.
If you want to be fancy and use jquery, here is a list of popup plugins that you can browse.
If the product information isn't too complicated I would suggest using CSS as it is simpler. Also, you probably want to have the data already loaded, so the user doesn't have to wait a round trip to your server every time they mouse over a product. Here is a simple CSS popup tutorial.