- Screen name: jdln99
jdln99's Profile
22 Posts
42 Responses
0
Followers
Show:
- Expanded view
- List view
Private Message
I need to center text in a select list. There is no cross browser and device method using CSS only, so ive used jQuery to set a text indent.
The code takes the text from the select list, adds it to a span (which with css makes the text the same size), and measures the width of the span. With that value it takes some simple maths to work out what the text indent needs to be.
$(window).load(function() {
function textIndentFunc () {
textString = $('#from-1 :selected').text();
$('#hidden').text(textString);
textWidth = $('#hidden').width();
inputWidth = $('#from-1 select').width();
indentMy = (inputWidth / 2) - (textWidth / 2);
$('#from-1').css('text-indent',indentMy);
}
$('#from-1 select').change(function() {
textIndentFunc();
});
textIndentFunc();
});Most of the time this code works fine but sometimes doesn't appear to do anything, in which case refreshing the page normally fixes it. Why might this code being so temperamental? Ive loaded the code on dom ready.
Thanks
- I like it how jQuery Mobile hides the browser chrome on page load by scrolling down the page just enough so its hidden. However when I select an input field my iPhone moves the scrolling position so its visible again. Is there a way so when you leave focus on an input field the code that hides the browser chrome is reinitialised? Thanks
- 17-Apr-2012 06:08 AM
- Forum: jQuery Mobile
Im using the jQuery Mobile search filter with dividers: http://jquerymobile.com/test/docs/lists/lists-search-with-dividers.html
I need the dividers to collapse and uncollapse the list items below them when clicked, like the examples here:http://jquerymobile.com/test/docs/content/content-collapsible.html
I know jQuery Mobile can handle collapsable divs easily but can it be combined with my list or do I need to write some custom jQuery to do this?
Here is my site: http://smartpeopletalkfast.co.uk/jquery/basicDemo12-bugfix-3.htm
It works fine on firefox, chrome, safari and ie9, but messes up in IE8 and 7.
When you click on an image it expands. When you click on another image, any expanded images contract. I think its this second part of the jQuery causing problems. With IE8 and 7 the animation end up in the correct place, but all the images jump around before then.
Here is the code:$(".image-div").click(function () {
var divRefTwo = $(".image-div").not(this);
$(".image-div").not(this).animate({
width: '250px',
left: '0px',
marginRight: '0px',
backgroundPosition: '-125px'
}, 400, function() {
$(divRefTwo).css('z-index','1');
});
if ($(this).css('z-index') == 1) {
$(this).css('z-index','2');
$(this).animate({
width: '500px',
left: '-125px',
marginRight: '-250px',
backgroundPosition: '0px'
}, 500, function() {
//
});
}
else {
var divRef = this;
$(this).animate({
width: '250px',
left: '0px',
marginRight: '0px',
backgroundPosition: '-125px'
}, 500, function() {
$(divRef).css('z-index','1');
});
}
});Im using the jQuery noConflict method here: http://drupal.org/node/1058168
Now, both of the following work:
$jq("document").ready(function(){
alert('alert');
});
$("document").ready(function(){
alert('alert');
});However this does work:
$("document").ready(function(){
$(".view-product-slideshow .pager-num-1 img").css("display","none");
});But this does not:
$jq("document").ready(function(){
$jq(".view-product-slideshow .pager-num-1 img").css("display","none");
});Ive used the noConflict method once before and it worked fine. Ive no idea why it would work for the alert but not the CSS change.
My site is here: http://smartpeopletalkfast.co.uk/pp4/shop/baby-essentials/sleepsuit-plush
Thanks
- Is there a way to use jquery to detect any device with a touch screen?
Im using the jscrollpane but the handles drag in the wrong direction on touch screens like the ipad (in my opinion). As you can drag the main content (which works in the correct way), I want to hide the scroll bars if the device is a touch screen.
Thanks- Im trying to delay a CSS function. Here is my site:
http://smartpeopletalkfast.co.uk/ppr6/press
When you hover over the top left image it expands to cover the image below it. Ive used the code below (its in the page head) to change it's z-index so the image which is expanding is always visible over any others:
$jq("document").ready(function() {
$(".pressimage img").mouseenter(function() {
$(this).css('z-index','100');
});
$(".pressimage img").mouseleave(function() {
$(this).css('z-index','1');
});
});
This code works, but as soon as you mouse-off the image its z-index changes, so it doesn't stay visible while its resizing back to a thumbnail. What I need is for the z-index to return to 1 after the animation is complete, or for the z-index change to have a delay of about 1/2 a second. I figured the 2nd solution would be simpler.
I tried to use the following, It does set the z-index to 100 but never turns it back to 1.
$("document").ready(function() {
var timer;
$(".pressimage img").mouseenter(function() {
$(this).css('z-index','100');
clearTimeout(timer);
});
$(".pressimage img").mouseleave(1000,function() {
timer = setTimeout(function(){
$(this).css('z-index','1');
}, 500);
});
});
Thanks- The following functions are fired after a plugin is used. However they dont appear to always run sequentially. Is this the default jquery behavior and if so how can I make them run one after the other?
$jq(window).unbind();
$jq('#block-views-buyers_sec-block_1 a').css('color','black');
$jq(this).css('color','#F6969A');
$jq(window).bind('scroll', function () {
$jq("#block-views-buyers_sec-block_1 a").css("color", "black");
});
In case it matters this is what they are for:
The first unbinds the fourth function if the plugin has been run before.
The second turns all links black.
The third turns the link that was clicked on a different color.
The fourth means that if the window is scrolled the link will turn black.
The reason im doing this is im using the smooth scroll plug in:
https://github.com/kswedberg/jquery-smooth-scroll
My links have a fixed position and so are always visible. I need the link to be highlighted when clicked, but then I need the highlight to be removed if you either click on a different link or if you scroll (as you may now have scrolled away from the link's target).
Thanks- I need jquery 1.4 for some animations only available in that version. However im using the drupal CMS which has a version of jquery inbuilt, but cant be updated to 1.4. So is there anyway of allowing both versions of jquery to run on the same page, maybe by using a different selector for 1.4?
Thanks- 24-Jan-2011 01:49 PM
- Forum: Using jQuery
Sometimes when Im using jquery to add css to the page this creates a flicker effect as the page loads first without javascript, and then is modified.
Hiding the objects with normal css so they dont display before jquery uses them solves this problem, but sometimes i need the elements to be visible on browsers without javascript.
Is there a solution that solves both problems? Could i load css before the page content loads, but have this css only load if the browser has javascript?
Thanks- Ive made images that scale when you mouse over them with animate and it works fine:
http://smartpeopletalkfast.co.uk/enlarge/1 animate.html
However, when I try to use jQuery UI's scale, the effect loops and keeps firing so the image gets bigger and bigger:
http://smartpeopletalkfast.co.uk/enlarge/uiscale.html
How do I stop this, so my second example works like the first?
Thanks- Here is my page:
http://smartpeopletalkfast.co.uk/jump/jump menu.html
Im using href fragments to 'jump' down the page. The links have a fixed position so they stay visible.
How can I highlight the active link? So when you click link2 and you jump to the blue section, how can I highlight the link2 text?
Thanks
- I need to have an image of a heart on a site that beats, so essentially it expands and contracts. Whats the best animation effect for this? Should I use .animate to resize the image?
Thanks- 17-Jan-2011 09:01 AM
- Forum: Using jQuery
I have this which gives me an alert if a ul is larger than 730px;
$("document").ready(function () {
var widthMy = $(".jcarousel-control ul").width();
if (widthMy > 730)
{
alert("widthMy is greter than 730");
}
});
I need this function to only happen if the ui is larger than 730px.
$(function() {
$(".jcarousel-control").jMyCarousel({
visible: '760px',
speed: 100,
circular: false
});
});
If I have the function applied regardless (outside of conditional statements) it works fine. The alert message from the first code also works fine. However when I paste the 2nd code into the brackets of the first it doesn't work;
$("document").ready(function () {
var widthMy = $(".jcarousel-control ul").width();
if (widthMy > 730)
{
$(function() {
$(".jcarousel-control").jMyCarousel({
visible: '760px',
speed: 100,
circular: false
});
});
}
});
Im assuming ive just made a syntax error. Could someone help me out?
Thanks- 11-Jan-2011 02:39 PM
- Forum: Using jQuery Plugins
Im using jcarousel with drupal and the standard carousel is working fine:
http://smartpeopletalkfast.co.uk/oo/content/red
However I want to add the numbered external controls as demoed here:
http://sorgalla.com/projects/jcarousel/examples/static_controls.html
Ive added the same controls as the demo which is:
<div class="jcarousel-control">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
</div>
From the demo, I think the extra javascript that I need to add is:
<script type="text/javascript">
function mycarousel_initCallback(carousel) {
jQuery('.jcarousel-control a').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
};
</script>
However its not working. Ive tried adding the code to the begging and end of my head, as well as the end of the page (just within the end of the body). Is the code correct? If so, am I loading it incorrectly?
The current javascript that's working (for the standard carousel) is created by the drupal UI so sorry if this makes it a little unclear.
Thanks- Is there a plug in that makes a slider that goes off the page like this:
http://kamola.co.uk/page/spring-summer-collection
Ive had a look but i cant find one.
Thanks- 02-Jan-2011 11:10 AM
- Forum: Using jQuery Plugins
Im using the Cycle plug in with Drupal. Im using the onAfter function to hide the 'prev' sideshow control at the beginning of the sideshow and the 'next' control at the end.
Everything works fine unless their is only 1 slide, then both controls are shown but I need them to both be hidden. I can understand why the plugin wasn't designed to work with only 1 slide, however the way that im using it with a content management system means this will sometimes be the case.
Here is my site, on a page where everything is OK:
http://smartpeopletalkfast.co.uk/slideshow4/frame
Here is a page with only 1 slide. The right and left buttons don't do anything but aren't hidden:
http://smartpeopletalkfast.co.uk/slideshow4/light
This is the demo of the Cycle plugin ive used:
http://jquery.malsup.com/cycle/after.html
Thanks
I posted a question about the same site before but ive started a new thread as this is a different issue.
http://forum.jquery.com/topic/onafter-effect-for-cylce-plugin- 09-Dec-2010 11:45 AM
- Forum: Using jQuery Plugins
Im trying to use the onAfter effect demonstrated here:
http://jquery.malsup.com/cycle/after.html
This is the first slideshow, where I havnt used the effect and everything works fine:
http://smartpeopletalkfast.co.uk/slideshow2/slideshow1
For the 2nd slideshow ive added this:
after: onAfter,
timeout: 0
http://smartpeopletalkfast.co.uk/slideshow2/slideshow2
For some reason everything stops working.
Here is my site:Im trying to use the onAfter effect like in this demo:
http://jquery.malsup.com/cycle/after.html
http://smartpeopletalkfast.co.uk/dom2/bike
How do I use theonAfter effect? Do I call another function or write the css to hide the buttons all in one place?
Thanks- How can I wrap every 3 divs in a new div? So If I have;
div1
div2
div3
div4
div5
div6
I need this to become;
<div>
div1
div2
div3
</div>
<div>
div4
div5
div6
</div>
I also need this to wrap the last div(s), even if their are less than 3 so this;
div1
div2
div3
div4
div5
div6
div7
Would become;
<div>
div1
div2
div3
</div>
<div>
div4
div5
div6
</div>
<div>
div7
</div>- When I add html to my page as an open tag, jquery is closing the tag for me, how to i stop this?
The reason im doing this is I have a series of divs and I need li tags around every 2 divs. So I have this;
div1
div2
div3
div4
And I need this;
<li> div1 div2 </li>
<li> div3 div4 </li>
I can see the code is being applied in the correct place with this;
window.onload = function(){
$(".mydiv:even").before( "open li ");
$(".mydiv:odd").after("close li");
}
However, If i change the text to the actual mark up, as soon as a li is opened on the page it is also closed.
window.onload = function(){
$(".mydiv:even").before( "<li>");
$(".mydiv:odd").after("</li>");
}
So I get something like this;
<li></li>
div1
div2
<li></li>
div3
div4
<li></li>
How can I make jquery respect open li tags?
Thanks- How can I modify the html on my page so I have 2 items per li results?
I need the following;
<li>Image1 Image 2</li>
<li>Image3 Image 4</li>
<li>Image5 Image 6</li>
As a starring point I can either have an unformatted series of images, or I can have each image in its own li tag;
<div>Image1</div>
<div>Image2</div>
<div>Image3</div>
<div>Image4</div>
<div>Image5</div>
<div>Image6</div>
Or;
<li>Image1</li>
<li>Image2</li>
<li>Image3</li>
<li>Image4</li>
<li>Image5</li>
<li>Image6</li>
I want to use the jcarousel vertical scroller but I need to have 2 colums. Because of the way the height is calculated I need 2 images per li. However my CMS wont let me output the image in that way.
Thanks- «Prev
- Next »
Moderate user : jdln99
© 2013 jQuery Foundation
Sponsored by
and others.