Hellow everyone,
I'm having a problem on the site where my images' widths are not being calculated properly (they're not showing either on first load as well) inside jCarouselLite plugin.
I wonder if this has something to do with the fact that they're loaded from the CDN and don't have a proper content-type set (or something similar). (Example apartment)
If you check the List of apartments, you can go inside each one by clicking on the name or on the picture. It's INSIDE that pictures do not show up for me in any browser I've tried. If, however, I refresh the page, they show up fine.
Can anyone suggest what may be happening here?
Related
So I'm constructing a induction-type webpage, I'm using a template which someone has already previously built in order to see how it fits my needs
Essentially, it includes a dynamic page switcher that uses previous and next buttons to swap out the body content without having to load another entire page.
EXAMPLE: https://css-tricks.com/examples/DynamicPage/
Upon clicking a hyperlink inside the main content, the body will show the correct content from the external pages. However, if I click either of the navigation links up top ("Home >> Inductions >>") the link is not opened as a new page, but instead I think ajax attempts to load that page inside the ajax-body section.
Specifically in the codepen, this is the navbar I'm mentioning which I do NOT want ajax to work on. I've tried multiple fixes but finally throwing my hands in the air.
<nav id="location">Home >> Inductions >> Vehicle 1</nav>
What I am aiming to build is attempt something like this: https://css-tricks.com/examples/DynamicPage/
This is the creator showing how its made, if I am unable to describe it as well as I should: https://css-tricks.com/dynamic-page-replacing-content/
I made a codepen the best I could, without being able to upload the other 2 pages which ajax will load the bodies from - https://codepen.io/dylan-mclean-the-vuer/pen/XWbONyP
Just imagine that clicking the 'prev' or 'next' will load a body inside the contained from external HTML docs. I couldn't figure out how to use multiple HTML files. I still need to make a proper prev/next in JS somehow still, just will take some time! Currently, prev just links to one HTML doc and next links to another.
Keep in mind I'm still at the diploma-grad coding level, so I'm sorry if I'm missing an obvious solution, or if its too messy to understand!
I have a JQuery TouchTouch based gallery on one of my websites. It works perfect when I call it once for the photos list that was loaded with the page. Recently, I needed to add new functionality to this page (the website is online store, I'm talking about page with a product). I need to load same product of a different color without leaving the page (different URLs are still used for this purpose, but I need to change this ASAP because of duplicates affect SEO).
Using AJAX, I'm loading all necessary information about product (including photos URLs) and everything is ok, except the JQTT gallery: if I don't call touchTouch() on selector that was used the first time, during the page loading - nothing works at all (that is obviously, because no photos information auto-updates provided in plugin). However, when I call touchTouch() second time on the same selector, overlay with buttons (arrows) appears, but photo is never loaded, only the loading GIF is shown permanently. I have checked this in Mozilla FireFox and Google Chrome - the same behavior. By the way, thumbnail photos are loaded fine, but displaying them is not directly related to the plugin, because they are only triggers for loading large photos.
The first thing that may help, as I supposed, was a test: call touchTouch() not immediately after AJAX-request and new photos insertion in DOM, but call it after a long delay (for example, 10 secs) to make sure that problem is not in plugin's preloading features (if any) or someting similar. That didn't help.
Then I made the second test: I deleted first touchTouch() call in document-ready (so, plugin doesn't work on document load), then made this call after updating photos. In this case, plugin worked fine.
So, in view of the aforesaid, i'm searching for solution how to make JQTT plugin work after photos list update. The selector is always the same (I mean CSS class name that is used for every photo and that is called in $(selector).touchTouch()).
Here is a real example on website: http://raroom.com/chairs/chair_bertoia/bertoia-1
At the moment, two versions of one product (designer's chair with black seat and with white seat) is available via two links (current is marked with thick black underscore). Second link ends with "bertoia-2" (instead of "bertoia-1").
I writed a function loadProductPage(productId) to load the second product without following a link (you can see code in the bottom of page source). If you call this function from console - you will see the problem described (id of second product in DB is 6, for first is 5, so, if you open first link - call loadProductPage(6)).
Thanks in advance.
It's so pitty, 5 days left and nobody helped me with such an easy question. I found a solution by myself. Having no other choice, rather then to explore the JQuery Touch Touch JS code line by line, I noticed that it creates new div's with class "placeholder" inside the div with id "galleryOverlay", no matter if they were creater earlier or not. I mean, it appends new placeholder-divs to existing ones (at the previous call of touchTouch() method), so it breaks the script logic and it cannot load new photos anymore, because of using wrong placeholder-divs.
The solution is to delete previous placeholder-divs before updating photos and thumbnails URL's and before calling touchTouch() method again. With JQuery it is one simple line of code:
$('#gallerySlider .placeholder').remove();
I have a question regarding watermarks for images. For instance: I want to display an image (pure HTML). If a user clicks on the image however, there should be a watermark, showing where that photo comes from.
I was thinking about a layer-solution. Putting an invisible layer over the main image and link to another image instead. That would force me to have every photo two times on my server. Not the best idea.
I found a lib called watermark.js (link here: watermark.js).
However, this would only allow me to put watermarks right in the beginning.
To explain the situation: User on my site sees everything without watermark, opening it directly in the browser should add the watermark.
Another solution I had was to always apply a watermark via script, and remove it if the user is currently on my site.
Maybe you have a solution to apply watermarks only on the linked images. I'd like to realize it via jquery.
Thank you in advance.
I would like to print a portion of the page, that is a div.
Also I need css files referred, so it will get printed as we see in the page.
I tried to use jQPrint then printThis . But my IE7
browser was getting crashed when i click a button on second time. Not
sure what is the problem. My page has lot of elements (100+ input
fields and 3 Grids)
Finally, I followed this http://www.bennadel.com/blog/1591-Ask-Ben-Print-Part-Of-A-Web-Page-With-jQuery.htm and implemented. Now no crash!
Now how can I show a print preview dialog before sending printer?
Something like this https://github.com/etimbo/jquery-print-preview-plugin, I tried this too but its not working :(
I did this same task in a prior job, and completed y the following example. We set it up to where what ever part of the design we were sending to a printer, we would replicate the HTML, and create a dynamic page with that content, and then trigger the browser print dialog. If you want to do what you are asking, without a lot of "magic", this is a good way to handle it.
I have a static site with classic menu like: home, services, contact etc links.
What I'm trying to do is reducing the site's size.
So, instead of using multiple pages for links (like home.html, services.html) I'm trying to keep only one page and then (when clicking occurs) dynamically change content.
html code (sample):
contact
<h1>old text</h1>
js code:
function ContactClick() {
$('h1').html('new text to change, but it doesnt work, yay!');
}
Something funny happens. If I click on the link, 'old text' becomes indeed 'new text', BUT ONLY FOR 1 SECOND! And then, it changes right back to 'old text'!
I have tryied calling like this: <a href="javascript:ContactClick();"> and it works just fine, but still I need to refresh the page when click event occurs (I have some color changing stuff on site, lol).
Is there another way to reduce site's size, or my idea is just fine?
OR
Is there a solve including refreshing the site and calling the js junction from link?
Perhaps you shouldn't be reloading the page in your href.
You do not need to reduce the site's size. Static pages that contain only text are small and load in a fraction of a second even at the first time. After that, they will be in cache and load instantly.
On the other hand, if you put all the text in one page, plus add some javascript code, the result is not smaller but bigger than the static pages.
Further, you should remember that javascript does not always work. For example, many people disable javascript for security reasons or to avoid irritating advertisements. Therefore, navigation should never be dependent on javascript. At the very least, you should have noscript part that works with static pages in case javascript is disabled. (But this will make the page even bigger.)