I can't get it working anyone out there can help
I use this in the head
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
I use this for photos
rel="prettyPhoto[pp_gal]"><
I use this before the closing body tag
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
animationSpeed: 'normal', /* fast/slow/normal */
padding: 40, /* padding for each side of the picture */
opacity: 0.35, /* Value betwee 0 and 1 */
showTitle: true, /* true/false */
allowresize: true, /* true/false */
counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
theme: 'light_rounded' /* light_rounded / dark_rounded / light_square / dark_square */
});
});
</script>
I linked the prettphoto CSS to my document
What do I do with the jquery.js and the jquery-1.3.2.min.js folders?
Make sure the js and css folders are positioned relative to your current page. For example, if you are working on http://localhost/photogallery/index.html, make sure the 3 folders included with your prettyPhoto download get extracted to http://localhost/photogallery/, and not the root of your server.
Make sure you have the prettyPhoto "images" folder. It includes a number of themes and other resources necessary for prettyPhoto to look right.
A conflicting library or version of jQuery may be stopping prettyPhoto from loading. Try running prettyPhoto on a blank page with just the necessary scripts and CSS included, and a couple image links with rel="prettyPhoto[pp_gal]". If this works, and when you bring the code back in to your page it doesn't work, you can know that something is conflicting on the page with prettyPhoto or jQuery.
Check for any errors on the page. Internet Explorer has the Developer Tools. Firefox has Firebug. Chrome has Developer tools. Search online for how to use the one particular to your favorite browser.
Like Dawson said in his number 4 answer, check to make sure you don't have any javascript errors on your page that would be stopping prettyPhoto from loading correctly.
I was banging my head against my keyboard for 2 hours b/c it wasn't working for me. In Firefox, I used Tools > Web Developer > Error Console to see that I had a JavaScript code from another widget I'm using throwing an error. I commented out that line and it worked correctly.
Check check, and check again.
Related
I'm having an issue where the first second of loading time of my website shows the elements of my banner (a form field as well as a background image), but the text shows up significantly later.
The text is using a custom font, called Circular Std. I added the following preload links to my head:
<link rel="preload" as="font" type="font/woff2" crossorigin="" href="https://example.com/wp-content/uploads/2021/01/CircularStd-Bold.woff2">
<link rel="preload" as="font" type="font/woff2" crossorigin="" href="https://example.com/wp-content/uploads/2021/01/CircularStd-Medium.woff2">
<link rel="preload" as="font" type="font/woff2" crossorigin="" href="https://example.com/wp-content/uploads/2021/01/CircularStd-Book.woff2">
Still, the text shows up significantly later than everything else.
Basically, I'm wondering how I can avoid this:
Edit/Update:
Appreciate the answers below, but for me the issue happened to be due to a configuration option within a WordPress plugin called WP Rocket. I had the Optimize CSS Delivery option on which, not only inlines critical CSS, but also apparently defers the loading of the CSS by doing something like this:
<link rel="preload" href="https://example.com/wp-content/uploads/thefile.css" data-rocket-async="style" as="style" onload="this.onload=null;this.rel='stylesheet'" type="text/css" media="all">
So I was experiencing a flash of unstyled content (FOUC) from this.
You can do it with a transition triggered by the page load event. Start the body off completely transparent, then fade it in once the page has finished loading.
document.addEventListener("DOMContentLoaded", function() {
document.body.classList.add("loaded");
});
body {
opacity: 0;
transition: all 1s;
}
body.loaded {
opacity: 1;
}
This looks similar to the problem discussed here: How come my custom font wont show when I write stuff with fillText()?
On modern browsers you can delay showing anything until your font is loaded. As in this case it's definitely the font loading that is causing the problem you could do this sort of thing (based on MDN)
Set body style to opacity: 0 then:
let f = new FontFace('myCusomFont', 'url(myCustomFont.ttf)');
f.load().then(function() {
// Ready to use the font
document.body.style.opacity = '1';
});
However, you'll want to think through what is to happen if the font never loads (e.g. whatever server you are using is down, so probably abanding the fontload on some reasonable timeout) and also whether you'd like to show the user something while it is loading just to give them comfort that something is happening.
I installed a SSL trust logo onto my website – the following code is what displays the logo:
<script language="JavaScript" type="text/javascript">
TrustLogo("https://www.(mywebsite).com/comodo_secure_seal_76x26_transp.png", "CL1", "none");
</script>
I needed it to be fixed on the bottom left corner of my page, so after a lot of trial and error I settled with the following code:
img:not(main img) {
position: fixed;
bottom: 0;
left: 0;
The problem is, this isn't really targeting the specific image that needs to be targeted. The bigger problem is that this does not work on any other browser other than the browser I had originally tested (Safari). (Maybe it's because the 'img' tag is not appropriate targeting?)
How can I target this logo? (If not through CSS, how can I make it fixed?)
Safari (the CSS works here)=>
Chrome (CSS does nothing)=>
This worked for me:
Do not use img to target the logo – use one of the image's attrributes to be as specific as possible.
Try something as simple as the src attribute:
[src="https://www.(mywebsite).com/comodo_secure_seal_76x26_transp.png"]
You can also use a node inspector to view more useful information to help you pinpoint the image.
so for the company I work for, I'm writing a script that automatically attempts to add padding to the navigation to approximately fill up the remaining space (as adding padding manually to these elements is a repetitive process I wanted to try to omit)
The script is here: http://a.ndrv.in/Skinning/SmartNav/smartnav.js
We also use the Adobe TypeKit service, which also changes certain fonts that we declare. However, if a font is particularly thin (anything with the condensed keyword), About 50% of the time, it seems to determine the amount of space versus the original font size (which is normally Ariel) rather than the newer, more condensed font size. The "SmartNav" script is loading lower on the page, but even when I push it to the bottom of the site, it still doesn't load correctly 50% of the time.
So, I'm wondering if there's a specific way I can tell this script to wait until this font loads before it tries to determine how much padding to add to each menu element.
Yes there is a way. As per their documentation
<script type="text/javascript" src="http://use.typekit.com/xxxxxxx.js"></script>
<script type="text/javascript">
try {
Typekit.load({
loading: function() {
// JavaScript to execute when fonts start loading
},
active: function() {
// JavaScript to execute when fonts become active
},
inactive: function() {
// JavaScript to execute when fonts become inactive
}
})
} catch(e) {}
</script>
You will call your script when typekit is active :)
I've attempted to run several of the "falling snow background" type scripts available at scriptmania. Just javascript, no jquery.
I'm puzzled by the fact that some of them work fine in IE, but fail to animate in FF, Chrome or Safari when the doctype is set to HTML5. The scripts do run in any of the above browsers when the doctype is set to HTML 4.0 Transitional.
Here are links to a couple of scripts that have this behavior:
http://rainbow.arch.scriptmania.com/scripts/bg/snow_fall.html
http://rainbow.arch.scriptmania.com/scripts/bg/autumn_fall_timeout.html
Any pointers as to what might be the root cause of the failures and/or fixes would be appreciated.
The HTML 4.01 Transitional Doctype with no URL component triggers Quirks mode in browsers.
The HTML 5 Doctype triggers standards mode in browsers.
In Quirks mode, numerous bugs of older browsers (from the 1990s) are emulated.
Dependancy on any of these bugs could be the cause of the problem, but the most likely is that something is setting a CSS property which expects a length but giving it a Number. Lengths other than 0 require units (such as 23px).
Web Oficial:
http://rainbow.arch.scriptmania.com/scripts/bg/snow_fall_2.html
Download:
http://rainbow.arch.scriptmania.com/scripts/bg/snowstorm.js
Code:
<!-- SNOW TAGS START -->
<!-- Copy the <script> tag into your own page(s) for the snow effect. That is all! (No CSS etc. is needed) -->
<script type="text/javascript" src="snowstorm.js"></script>
<!-- now, we'll customize the snowStorm object -->
<script type="text/javascript">
snowStorm.flakesMaxActive = 95; // show more snow on screen at once
snowStorm.snowStick = true; // When false, snow will never sit at the bottom
snowStorm.animationInterval = 33; // 20 = fast + smooth, but 50 = more but slower
</script>
<!-- SNOW TAGS END -->
Open your file snowstorm.js is go line 41
before:
this.zIndex = 0; // CSS stacking order applied to each snowflake
after:
this.zIndex = 1000; // CSS stacking order applied to each snowflake
Problem body layer is can not see the snow to mean 0 is none, so the need to change for 1000 is available see the front of the body shows snow in front.
sry bad english
Merry Christmas 2014 and New years 2015 ;-)
I'm hoping someone can help me with this fadeslideshow script. There are many topics from other forums with answers as to why this isn't working of other people but I've tried all their fixes and mine is still not working.
I have no trailing commas, my images on not on my local drive and I have located the proper js file and code. However through this all I have not been able to find out why it is not working in ONLY IE8. It works in ALL the other browsers except this one.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="scripts/fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [934, 369], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/banner-home1.jpg"],
["images/banner-home2.jpg"],
["images/banner-home3.jpg"],
["images/banner-home4.jpg"],
["images/banner-home5.jpg"]
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand"
})
</script>
And this is what I'm calling in my HTML
<div id="fadeshow1"></div>
If anyone can give me advice or ideas as to why this might be happening in IE8 I would appreciate it!
Green Day is right.Change the jquery version to newer version.this will solve your issue.earlier i had same issue.i solved it by changing the version.