Search jQuery

jQuery Forum

Screen name:
wasteofpaper

wasteofpaper's Profile

3 Posts

11 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Dynamically replacing images at varying screen dimensions
[14Replies]
- 15-Feb-2014 04:25 PM
- Forum: Using jQuery
Hi, I have a slider built into my web page thats dimensions and ratio alter for different screen sizes, I need the images that I place within this slider to also alter for the same purpose. The code that I have does't seem to be working, I'm a bit of a newbie to jQuery and have pieced it together myself but I think that its essentially quite close to being functional…

<script>
$(document).ready(function() {
if($(window).width() < 1600 && $(window).width() > 1440){
$(".replaceimg").attr("src", $(this).attr("src").split(".").join("_1600."));

}

});
</script>

<img class="replaceimg" src="images/SC.png" alt="image desc" />

I have a working version here: mdwoodman.co.uk but it only works because I am calling images directly rather than amending the src, which I want to avoid

if($(window).width() < 1600 && $(window).width() > 1440){ $(".replaceimg").attr("src", "images/SC1600.png");

Any help would be hugely appreciated!
M

jQuery border inset plugin
[4Replies]
- 13-Feb-2014 09:22 PM
- Forum: Using jQuery Plugins
Hi,
I'm using the jQuery inset border plugin: http://css-tricks.com/inset-border-effect/
I'd like to reverse the effect of the plugin so that borders move inwards on hover. I've managed to achieve this but the border is still visible on load of the browser window, I'd like it to be initially invisible.

Please could someone show me to do this? Code is:

(function($) {

$.fn.insetBorder = function(options) {

if ((options!=undefined) && (options.inset!=undefined))
{
if (options.insetleft==undefined) { options.insetleft = options.inset; }
if (options.insetright==undefined) { options.insetright = options.inset; }
if (options.insettop==undefined) { options.insettop = options.inset; }
if (options.insetbottom==undefined) { options.insetbottom = options.inset; }
}

// defaults
options = $.extend({
speed : 250,
insetleft : 10,
insetright : 10,
insettop : 10,
insetbottom : 10,
borderColor : '#ffffff',
borderType: "solid",
outerClass : "ibe_outer",
innerClass : "ibe_inner"
}, options);

// run plugin on entire jQuery set
return this.each(function(i)
{

var
$el = $(this),
ibe_height = $el.outerHeight(),
ibe_width = $el.outerWidth();

var
wrapper = $("<div />", {
"class": options.outerClass,
"css" : {
"width": ibe_width,
"height": ibe_height,
"overflow": "hidden",
"top": 0,
"left": 0,
"position": "relative"
},

"mouseenter": function() {
$el

.next()

.animate({
"height": (ibe_height - (options.insettop + options.insetbottom)) + "px",
"width": (ibe_width - (options.insetleft + options.insetright)) + "px",
"top": 0,
"left": 0,


"opacity": 1
}, {
"duration": options.speed,
"queue": false,
"complete": function() {

// BUG: for some reason this is getting called twice.

// Kinda works... attempt at allowing selectability of main element
// The problem is this only fires on complete but must make visibile on mouseleave no matter what
// $el.next().css("visibility", "hidden");

}
});

// on mouseleave
},
"mouseleave": function() {

$el

.next()
// .css({
// "visibility": "visible"
// })
.animate({

"top": "-" + options.insettop + "px",
"left": "-" + options.insetleft + "px",
"height": ibe_height,
"width": ibe_width,
"opacity": 1
}, {
"duration": options.speed,
"queue": false
});

}
}),

after = $("<div />", {
"class": options.innerClass,
"css" : {
"height": (ibe_height - (options.insettop + options.insetbottom)) + "px",
"width": (ibe_width - (options.insetleft + options.insetright)) + "px",
"border-left": options.insetleft + "px " + options.borderType + " " + options.borderColor,
"border-right": options.insetright + "px " + options.borderType + " " + options.borderColor,
"border-top": options.insettop + "px " + options.borderType + " " + options.borderColor,
"border-bottom": options.insetbottom + "px " + options.borderType + " " + options.borderColor,
"position": "absolute",
"top": 0,
"left": 0

}
});

$el.wrap(wrapper).after(after);

});

};

})(jQuery);

Many thanks :)
M

Multiple instances of the same code on simplified
[4Replies]
- 13-Feb-2014 04:04 PM
- Forum: Using jQuery
Hi! This is my first post on here and a bit of a rookie question but I've been struggling to find help on the matter for months and all of my posts on Stack Exchange have gone ignored. I'm convinced that what I'm trying to do is fairly simple and that anybody with an intermediate knowledge of jQuery will be able to help me (my own experience is lacking).

Basically I've created a script for a modal window which fixes the 'body' position and hijacks the browser scrollbar exactly as I intend it to. Now all I need to do now is edit the code so that multiple instances containing different content can exist on the same web page. This is what I am struggling with. The code is simple;

<script>
$(document).ready(function() {
var body = $('body'),
main = $('.main'),
open_modal = $('.open-modal'),
close_modal = $('.close-modal'),
modal_container = $('.modal-container'),
toggleModal = function() {
body.toggleClass('body-locked') ;
modal_container.toggleClass('dp-block');
};

$(".open-modal").click(function(){
$(".modal-container").fadeIn(1000);
});

open_modal.on('click', toggleModal);
close_modal.on('click', toggleModal);

});
</script>

Now rather than repeating it in slightly varied instances like this;

<script>
$(document).ready(function() {
var body = $('body'),
main = $('.main'),
open_modal = $('.open-modal_1'),
close_modal = $('.close-modal_1'),
modal_container = $('.modal-container_1'),
toggleModal = function() {
body.toggleClass('body-locked') ;
modal_container.toggleClass('dp-block');
};

$(".open-modal_1").click(function(){
$(".modal-container_1").fadeIn(1000);
});

open_modal.on('click', toggleModal);
close_modal.on('click', toggleModal);

});
</script>

<script>
$(document).ready(function() {
var body = $('body'),
main = $('.main'),
open_modal = $('.open-modal_2'),
close_modal = $('.close-modal_2'),
modal_container = $('.modal-container_2'),
toggleModal = function() {
body.toggleClass('body-locked') ;
modal_container.toggleClass('dp-block');
};

$(".open-modal_2").click(function(){
$(".modal-container_2").fadeIn(1000);
});

open_modal.on('click', toggleModal);
close_modal.on('click', toggleModal);

});
</script>

<script>
$(document).ready(function() {
var body = $('body'),
main = $('.main'),
open_modal = $('.open-modal_3'),
close_modal = $('.close-modal_3'),
modal_container = $('.modal-container_3'),
toggleModal = function() {
body.toggleClass('body-locked') ;
modal_container.toggleClass('dp-block');
};

$(".open-modal_3").click(function(){
$(".modal-container_3").fadeIn(1000);
});

open_modal.on('click', toggleModal);
close_modal.on('click', toggleModal);

});
</script>

I'd like the jQuery to do the hard work for me so that I don't have to repeat a slight variation of the code for each individual modal window (they all have different content in and are called by a user selecting a specific button).

Many thanks in advance
Matt

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend