jQuery: how to implement this roll-out effect? - javascript

I need some help to implement this roll over / out effect.
This is the screenshot: http://dl.dropbox.com/u/72686/roll-over-out.png
I have a menu. When I roll over the item "Products" the popup block appears below it, with a tree with all products.
<div id="menu">
<div id="product"> Roll over here </div>
...
</div>
<div id="popup">
<div> <a> link </a> </div>
<div> <a> link </a> </div>
<div> <a> link </a> </div>
...
</div>
This block has css:
#popup {
position:fixed
display:none
}
Now, it is clear how to implement roll over to show the block:
("#product").mouseover(function() {
$('#popup').css("display","block");
})
However how can I handle the rollout ? I have the following issues:
1) If I add roll-out to the menu item "#product", when I roll-out from it (to move to the popup with product trees), I make this last one to disappear (because I'm leaving the menu item).
2) If I add roll out functionality to the popup, I have issues with his children. i.e. If I move the mouse over a link of the tree, the popup disappear (because I'm leaving the parent #popup).
thanks
ps. I cannot use :hover (it is not supported by jquery version on Drupal CMS).

Firstly I think you will find that mouseenter and mouseleave are better events for this kind of thing. See the jQuery example in IE to understand why, not a huge problem but you may end up wit flickering otherwise.
However that will still not solve your problem. I would suggest use a setTimeout to close the menu, and then if your mouse enters the menu before the time out cancel the time out:
var t;
$("#product").mouseleave(function() {
t = setTimeOut(function(){$('#popup').hide();}, 100);
})
$("#popup").mouseenter(function() {
if(t)
{
clearTimeout(t);
t=null;
}});
This will prevent the popup from closing if you move from the product element to the pop up element. The clear timeout method prevents the timeout function from being executed.

Thorough Tutorial: Drop down menu

I have created similar solution, you can check it out here. See the demo here.

By the way, :hover isn't jQuery - it's CSS.
http://www.w3schools.com/cssref/sel_hover.asp

Related

How to add a scroll function with JS?

I am trying to add a scroll function to my landing page so that when the navi bar link is clicked, it smoothly scrolls to the section. instead of CSS, I should use JS, 'addEventListener','preventDefault' and ''scrollIntoView() to achieve this. I've been trying and trying for days, it just dosen't work, please help me!
here is my my CodePen link:
https://codepen.io/Qinisfighting/pen/bGYKEGe
I rewrote the code that you commented, but also changed a major part when you created the menu links.
const clickItems = document.querySelectorAll('.menu__link');
for (const clickItem of clickItems) {
clickItem.addEventListener("click", function(e){
e.preventDefault();
document.querySelector(e.currentTarget.dataset.href).scrollIntoView({behavior: "smooth"});
});
}
The main difference is that I changed your href attribute in the menu links into a data-href attribute, otherwise the native behavior would scroll down to your sections, just like any link would do.
navList += `<li id="${sectionName}"> <a class="navbar__menu menu__link" data-href="#${section.id}">${sectionName}</a></li>`;
You can search for the element and move directly
document.getElementById("myElement").scrollIntoView();
"behavior" Defines the transition animation. One of auto or smooth. Defaults to auto.
Post: How do I scroll to an element using JavaScript?

How do I let multiple sliders on one page function separate from each other?

You guys have been such a good help in the past. I hope you can help me out again! I'm still learning a lot, but I've just came across an issue I'm not able to fix myself. I've read similar posts with similar issues, but I wasn't able to implement those solutions...
I'm making an template for a client. In this template there is a slider, which works great.
Problem is: the client can add another slider to the same page. At that point the second slider doesn't 'work' when you click the arrows. Only the arrows of the first slider are working and also slides the second slider slides.
So, I think I understand that I should 'target' the specific ID or Class of every slider in my sliders code. Something with .find(), but I just can't get it to work.
Specific question: how do I make this code work, so that my customer can add as many sliders as he wants on 1 page, without the sliders effecting each others functionality.
I hope you can help me out.
Slider code:
$(document).ready(function(){
// options
var speed = 500; //transition speed - fade
var autoswitch = false; //auto slider options
var autoswitch_speed = 5000; //auto slider speed
// add first initial active class
$(".slide").first().addClass("active");
// hide all slides
$(".slide").hide;
// show only active class slide
$(".active").show();
// Next Event Handler
$('.nextbtn').on('click', nextSlide);// call function nextSlide
// Prev Event Handler
$('.prevbtn').on('click', prevSlide);// call function prevSlide
// Auto Slider Handler
if(autoswitch == true){
setInterval(nextSlide,autoswitch_speed);// call function and value 4000
}
// Switch to next slide
function nextSlide(){
$('.active').removeClass('active').addClass('oldActive');
if($('.oldActive').is(':last-child')){
$('.slide').first().addClass('active');
} else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
}
// Switch to prev slide
function prevSlide(){
$('.active').removeClass('active').addClass('oldActive');
if($('.oldActive').is(':first-child')){
$('.slide').last().addClass('active');
} else {
$('.oldActive').prev().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
}
});
HTML Markup:
<div class="afbeeldingen-slider-container">
<div class="plate--container">
<div id="container-slider" class="sliderbtn">
<div id="prev" alt="Prev" title="Prev" class="nextbtn">
<i class="material-icons">keyboard_backspace</i>
</div>
<div id="next" alt="Next" title="Next" class="prevbtn">
<i class="material-icons">keyboard_backspace</i>
</div>
<div id="slider">
{% for afbeelding_voor_slider in afbeelding_slider.afbeeldingen_toevoegen %}
{% include afbeelding_voor_slider %}
{% endfor %}
</div>
<div style="clear: both;"></div>
</div>
</div>
</div>
You can see the two sliders in a test version of the theme here
The first slider is the 'testimonial slider' half way down, the second slider is the 'image slider' on the bottom of the page.
Since you have multiple sliders on your page with the same classes, jQuery picks the last one to work on, because the code is parsed and interpreted from top to bottom.
What would be best in your case is to make a global slider function, and use it on the sliders. Something like:
$(".slider").initSlider();
Inside the function you would find all specific DOM elements relative to the slider:
var nextbtn = $(this).find(".nextbtn")
This way the code runs for every slider, instead of the last one. But this is a very rudimentary example. Actually I'd recommend using an existing library where this functionality is already built in and tested. Take a look at http://jquery.malsup.com/cycle2/ which is a very basic slider library, but you can extend it however you like.
I see you're using the Plate cms. ;) Plate has Cycle2 built in in it's global_asset_url filter: https://platehub.github.io/docs/templating-reference/filters#global_asset_url

Need to disable hyperlinked background for section

Sort of a noob, but know enough to be dangerous. I'm working with a very jerry-rigged Wordpress site and have created this featured work gallery section that works fine except for one issue: If a user accidentally clicks the background behind the tiles, everything disappears. See for yourself:
http://neighboragency.com/#/what-we-do/
I know why this is happening, and it's because I've built this section into a function for which that behavior is preferred on other parts of the site (see "Who We Are" section). What I'm hoping to be able to do is disable the background as an active link for this particular section. Code for that particular section is below. I'm hoping there's something I can apply to the opening tag that disables that background? Or am I going to have to dig into other files? I'm not as comfortable with JQuery so hoping it can be done within this chunk of code somehow. Thanks in advance!
<ul id="list-members">
<?php
//The Query
$items = get_posts('cat=6');
$count = count($items);
$cnt = 0;
//The Loop
if ( $count > 0 ) : foreach($items as $item) :
setup_postdata($item);
$custom_values = get_post_meta($item->ID, 'position', true);
?>
<li>
<div class="entry-content">
<div class="entry-content-col1">
<div class="list-detail">
<?php the_content();?>
</div>
</div>
</div>
</li>
<?php
$cnt++;
endforeach;
endif;
?>
</ul>
Whenever an event like a "click" happens you are able to listen to it, inspect information about it, and then take some actions depending on what that information was. Since you are already using jQuery take a look at the API docs for the jQuery Event object - all of that info is available to you if you set a listener to find it.
There is almost certainly more elegant solutions for your specific page, but one straight forward way to do it would be to listen for clicks on the area in question and prevent that event from propagating.
So for a very basic solution load your page and enter this into the JS console:
Listen for clicks inside the elements you wish to "smother"
When that event occurs prevent it from propagating by calling .preventDefault() on the event object passed into the handler function.
$("ul#list-members .entry-content-col1").click(function (e) {
e.preventDefault();
return false;
});
The above solution isn't great because its targeting multiple areas. If you can add some specificity to the markup like giving the area you are concerned with a unique class or ID name you can then target it more effectively.
In your custom JS file there is a function that uses the selector #list-members. This works fine on the "Who we are" section but on your "What we do" section, the same selector is being targeted. I would suggest using a different selector that only appears in the "What we do" section. Try changing the selector on line 120 to be more specific like this.
$('#post-6 #list-members li').on('click', function(){
var arrow = $(this).find('.entry-content-arrow');
if( $(this).find('.toggle-down').length > 0 ) {
$(this).find('.list-info').slideUp('slow');
$(this).find('.list-detail').slideDown(500, function(){
arrow.removeClass('toggle-down').addClass('toggle-up');
changeInteriorH(2);
if($(this).find('p:first').is(':empty')){
$(this).find('p:first').remove();
}
});
} else {
$(this).find('.list-info').slideDown('fast');
$(this).find('.list-detail').slideUp(500, function(){
arrow.removeClass('toggle-up').addClass('toggle-down');
changeInteriorH(2);
});
}
});
For your CSS changes:
It looks like there are two CSS styles that are implying that area is clickable. On line 887 of style.css you'll see
#list-members li:hover {
background-color: #4D3A2B;
}
You need to make that more specific just like we did with your JS. Try
#post-6 #list-members li:hover {
background-color: #4D3A2B;
}
for your selector. On line 860 of the same file change
#list-members li,
#list-partners li {
to
#post-6 #list-members li,
#post-6 #list-partners li{
so that the cursor does not show up on the background.
I'm not sure why you changed the delay on your JS function above but that's why things slowed down. That was not necessary and was probably not helpful.
If my answer solves your problem, please give it an up-vote. Thanks!

Click this image/link to activate a jquery pop up?

<div class="btnSection">
<img src="images/star.png">Save Progress
</div>
I'm trying to get this to work with a jquery popup plugin. The plugin requires you to click a button for the popup to take affect. How can I make my Image/Button activate that jquery?
This is the popup I'm trying to use : http://dinbror.dk/bpopup/
The button is drawn with CSS and then the image is just a little icon to the left.
$("btnSection").click(function () {
//make the animation for the div to show up
$(".myDiv").popUp();
});
Hope this helps.
you mean like:
$("a.split-btn").find("img").click(function() {
$('element_to_pop_up').bPopup();
});
Updated::
to bind more than 1 images, add same class o all your required images, say "img-class", and do:
$(".img-class").click(function() {
$('element_to_pop_up').bPopup();
});

Expanding videoplayer like CNN-website, prerably jQuery-based

I'm wondering if anyone knows of a script/plugin, jquery-based or otherwise, which could be used to achive the effect that can be found on CNN.com.
I'm talking about the videos that are representet by a small thumbnail, that when clicked expands in to the text and plays.
I'm by no means a JS-guru, and me and flash isn't the bestest of friends, but I'm not completly cluess.
Essentially, what im looking for is a way to click a thumbnail, expand a swf, and stop it if i contract it again. something like that.
ANY ideas, tips or insights are welcome!
A simple approach would be replacing the content of a div with the Flash video when clicked:
HTML
<div id="video-001">
<img src="video-thumb.jpg" />
</div>
jQuery
$('#video-001').toggle(function() {
$(this).html('<object whatevergoeshere...></object>');
}, function() {
$(this).html('<img src="video-thumb.jpg" />');
});
This is a simple example but it can be improved a lot, maybe by inserting the image as the div background, saving the code in the cache of the element (with .data()), adding the click event to all div with a specific class...
Hope it helps :)

Categories

Resources