jQuery Forum

Please see this  fiddle I have set up.

You are first confronted by three links. Each link triggers divs to slide out.

1. The link 'john smith' slides out and in at the speed we want. When it slides out the first line slides out then when that is completed the second line slides down as though coming from the first. When it slides back it does the same motion at the same speed but reverse i.e.. the second line slide back up first and then when that is completed the first line slides back to the left. 

2. When you click on the work link and menu slides out in the same manner as the bio. Also there is a sub menu that slides out when on clicks on item 2. 

3. When the user clicks on the contact link one line slides out. 

What we need to achieve is this; when any div is open and another link is clicked on, the visible div slides back in reverse to how they slid in. We have almost achieve this, however, the code is not quite right as the divs are not sliding back in at the same speed and in the right order, they simply slide back fast. For example, if one has clicked on 'work' and the 'item 2' link, and then you select 'contact' the opened div slide back very quickly. What I need to achieve is that they slide back in reverse to how they slid out. 

To attempt to make it clear, if you click on 'work' and then 'item 2' so with menus are visible and then click on work again, you will see the sub menu slides away first before the first menu. You will also notice that the items that slide up slide back down first before the divs slide back to the left. This is what needs to happen if you click on 'contact' or 'john smith' when the menus are visible.

I know this sounds very complicated and if I can answer any questions to make it clearer I will. 

Thanks

At the moment I am using jquery.ba-hashchange.min.js and dynamicpage.js to load the content dynamically from the index page and therefore keeping the header in one file. However, the jquery.ba-hashchange.min.js is interfering with other jQuery in my content.

The code in the content that is not working is as follows:

$(".thumbnails").on("mouseover mouseout", 'img', function () { 
    var alt = $(this).attr('alt'); 
    $('.displayed-image > img').each(function(index, element) { 
        var el = $(element), 
        visibility = el.attr('alt') === alt ? 'visible' : 'hidden'; 
        el.css('visibility', visibility); 
    }); 
});

This code makes hidden images visible when the user hovers over the thumbnails. You can see this working here http://intelligen.info/instagram-randoms.html

However if you navigate to this content using the menu at the top of the index page herehttp://intelligen.info Personal > Instagram Randoms , the code is not working. Can anyone tell me how to make the code work with the menu?

I am trying to simply style my select box so the text is centre aligned. It works in firefox but not in safari or chrome. I am thinking someone might know a little bit of jQuery that might do this? 

http://georgewoolfe.com/yogurtline.html

Thanks for your help.

Angela

Thanks Bas

On this page http://kimcolemanprojects.com/ I need to have a drop down menu that opens on click and closes again on click of same anchor. Like it works on this site http://angela-moore.co.uk/

this is my html for the menu so far:

<div class="left" id="nav"> <ul id="menu"> <li id="light"> <a href="lighting_video.html">Lighting + Video</a> <ul style="display: none;"> <li><a href="django_django.html">Django Django</a></li> <li><a href="suntrap.html">Suntrap</a></li> </ul> </li> <li id="photo"> <a href="photograms.html">Photograms</a> </li> <li id="about"> <a class="active" href="about.html">About</a> </li></ul> </div><!--end nav-->

As you can see I only need it to work within one list item. I need help writing the javascript for this.

Thanks for any help.

Angela

On this page http://kimcolemanprojects.com/djangolive_1.html there are five videos.

When you click on each video the next video scrolls up into view with jQuery.

Because of this jQuery effect, I had to disable the video controls. So I decided to put a play/pause button to the left of each video.

However, I now need some help with making a script that will change the button when each new video scrolls into view. I have a piece of script that changes the titles as the different videos scroll into view, which is also on the left of each video, please see script below.

1. $(window).load(function () { // Scroll to titles on click 
2. $('a').on('click', function () {
3. var target = $(this).attr('href');
4. $('html,body').animate({
5. scrollTop: $(target).offset().top
6. }, 'slow');
7. return false;
8. });
9. // jQuery `inView`-expression 
10. $.extend($.expr[':'], {
11. inView: function (el) {
12. var width = $(el).width(),
13. height = $(el).height(),
14. offset = $(el).offset(),
15. vp_dimensions = {
16. height: $(window).height(),
17. width: $(window).width()
18. }, y_offset = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop),
19. x_offset = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
20. return(offset.top < (y_offset + vp_dimensions.height) && offset.left < (x_offset + vp_dimensions.width) && (offset.top + height) > y_offset && (offset.left + width) > x_offset);
21. }
22. }); // Change the titles on scroll
23. $(window).scroll(function () {
24. $('li').each(function () {
25. var self = $(this),
26. title = self.find('video').attr('title');
27. if(self.is(':inView')) {
28. $('#title').find('h2').text(title);
29. }
30. });
31. }).scroll();
32. });

Thanks for your time

Angela

Hi,

On my page there are four columns of images. please see http://i-n-t-e-l-l-i-g-e-n-t-s-i-a.com/entry.html

There is some jquery (which is commented out at the bottom of the html, see script below also) that converts all images to black and white and when you hover they fade to colour, which is what i am trying to apply to these images. however when i do apply it it totally changed my css. Dow anyone know how I get this to work on my page?

$(window).load(function(){

$(".wrapper img").fadeIn(500);

$('.wrapper img').each(function(){

var el = $(this);

el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){

var el = $(this);

el.parent().css({"width":this.width,"height":this.height});

el.dequeue();

});

this.src = grayscale(this.src);

});

$('.wrapper img').mouseover(function(){

$(this).parent().find('img:first').stop().animate({opacity:1}, 1000);

})

$('.img_grayscale').mouseout(function(){

$(this).stop().animate({opacity:0}, 1000);

});

});

 function grayscale(src){

var canvas = document.createElement('canvas');

var ctx = canvas.getContext('2d');

var imgObj = new Image();

imgObj.src = src;

canvas.width = imgObj.width;

canvas.height = imgObj.height; 

ctx.drawImage(imgObj, 0, 0); 

var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);

for(var y = 0; y < imgPixels.height; y++){

for(var x = 0; x < imgPixels.width; x++){

var i = (y * 4) * imgPixels.width + x * 4;

var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;

imgPixels.data[i] = avg; 

imgPixels.data[i + 1] = avg; 

imgPixels.data[i + 2] = avg;

}

}

ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);

return canvas.toDataURL();

    }

Also is it possible to apply it to each column as a whole rather then the indiviual images, so the whole column (div) of imgs changes to color when mouse enters the div? 

Really would appreciate any help. Thanks 

Baselitz  

I want to activate a typewriter effect when mouse hovers over image. The image points at a flashing cursor, I want the cursor to look like it is typing out the text;

DESIGN STUDIO

and then the cursor to disappear once that has been written.

please see http://i-n-t-e-l-l-i-g-e-n-t-s-i-a.com/entry.html