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…
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
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; }
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).