Response title
This is preview!
- Screen name: theninth7
theninth7's Profile
5 Posts
9 Responses
0
Followers
Activity Trend
Last 30 days
- Last 30 days
- Date Interval
From Date : To Date :
Loading Chart...
Show:
- Expanded view
- List view
Private Message
- 12-Mar-2016 11:04 AM
- Forum: Using jQuery Plugins
Hi,
Just tried to update the Superfish plugin libraries used by my website from 1.5.8 to 1.7.8. I kept my customized CSS. Now, the menu looks the same as before, but the "dropdown" arrows have disappeared. In 1.5.8 they were done via the "sf-sub-indicator" CSS class, as background image. Tried to set the Superfish options cssArrows: false and autoArrows: true, both did not change anything. Does anybody know if this type of arrows is still supported by the latest version of Superfish?
Just wanted to avoid to start from the default CSS again, there was a lot of customization involved to get it to look like I want. :)
Thanks in advance for any advice!
Cheers, Robert- Hi,
I recently switched from a locally hosted jQuery to Google CDN:
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
At first it seemed that the Google server delivers the file compressed. However, since yesterday Google Page Speed again shows the suggestion to "Enable Compression" for the jQuery file, with 65 % possible reduction.
Anybody have a clue why the compression could have stopped working?
Thanks, Robert- Hi,
I have a photo blog (http://www.the-ninth.com) and want to create an effect that fades-in the displayed picture when the page is loaded.
An important requirement for me would be that the page also has to work without Javascript.
Currently I am using the following small plugin:- jQuery.fn.fadeInOnLoad = function()
- {
- return this.each(function(){
- $(this)
- .hide()
- .load( function() { $(this).fadeIn(); } )
- .each( function() { if(this.complete) { $(this).trigger("load"); } } );
- return true;
- });
- };
It is called directly beneath the <img> element:- <a href="xxx">
- <img id="pic_main" style="height: 367px; width: 550px" src="xxx" alt="xxx">
- </a>
- <script type="text/javascript">
- <!--
- $("#pic_main").fadeInOnLoad();
- //-->
- </script>
This way it works fine with the current versions of Firefox and IE. I did not test other browsers or versions yet. I tried to call it in $(document).ready but then IE might display the picture shortly before it is hidden and faded-in.
Since I am not 100% happy with having the code in the middle of the HTML and with depending on the timing of execution to avoid flickering I wanted to ask for other solution or best practices to achieve what I would like to do.
One solution that came to my mind is to do create the image in JScript and only fade it in after it is loaded. To work without Javascript I could still put the <img> element where it was but within a <noscript> element. But not sure how well the <noscript> is supported by older or exotic browsers.
I'd appreciate any thoughts on the topic.
Kind regards, Robert- Hi,
I am trying to write a plugin but have problems using "this" as reference to the object for which the plugin was called.
My plugin looks like this:
jQuery.fn.fadeInImage = function()
{
// for testing
alert( this.src );
this
.hide()
.load( function() { $(this).fadeIn(); } )
.each( function() { if(this.complete) { $(this).trigger("load"); } } );
return this;
};
This is embedded in the page as follows (picture.js is the file where the plugin code is stored):
<script type="text/javascript" src="js/picture.js"></script>
<script type="text/javascript">
$('#pic_main').fadeInImage();
</script>
The plugin get's called allright, but "this" seems to be an empty object. It is of type "object" but all the fields (like .src) are "undefined". Also the subsequent calls to fade in the image do not have any effect.
The reference to pic_main should work because if I put the code directly to the page it works:
<script type="text/javascript">
$('#pic_main')
.hide()
.load( function() { $(this).fadeIn(); } )
.each( function() { if(this.complete) { $(this).trigger("load"); } } );
</script>;
I would appreciate any advise on what I am doing wrong.
Thanks, Robert- Hi,
I have included jquery in the HTML header of my page:
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
So far I only included this but did not use jQuery in any way.
My page also uses the "overflow: auto;" CSS-property for the body element to hide the scroll bar on the right side.
With Firefox this works fine but with IE I often get a layout problem. When I see the layout problem, the background color extends to the border on the right hand side but the other elements are set in the position where they would be if the scroll bar would be there. This problem does not occur ALL the time but MOST of the time. I can reload the same page a couple of times and maybe for 2/3 of the tries I see the elements "hanging in the air", while for the other 1/3 they are correctly alligned to the border of the browser window.
The attached screenshots show this. In issue.jpg the elements are wrong, in no_issue.jpg they are correct. Both where shot from the same page, I just hit the reload button a couple of times.
When I remove the overflow:auto property then the layout is correct all the time.
Also, when I remove the script element that includes jQuery and leave in overflow:auto the layout is correct all the time.
I would appreciate any advise on solving this issue.
Kind regards, Robert
Attachments- issue.jpg
- Size: 19.75 KB Downloads: 2318
- no_issue.jpg
- Size: 18.25 KB Downloads: 2313
- «Prev
- Next »
Moderate user : theninth7
© 2013 jQuery Foundation
Sponsored by and others.
