Ok, So I've ade a static version of a piece of functionality and it works fine. When a user hovers over a div the content scrolls into it over a picture.
Now I needed multiple of these, accessible via tabs. To save loading time the content in these tabs (copies of the static version) are brought in with a .get from another html file.
The structure of my separate html files is the same as the default tab which is working, I hover over the one stats there on page load and it works, once i change tab, the old content is faded out, and the new content is faded i correctly. All the class names are the same as is the structure, but when I hover over these elements that were brought in none of it runs.
Do I have to do something special for .hover to work on content that's dynamically brought in via .get after the page has loaded?
Yes, you have to instantiate the hover after callback of the get method.
You'll need to use event delegation. Read up on the "Direct and Delegated Events" section here.
Use something like this:
$("#tabs_content_container").on({
mouseenter: function (e) {
},
mouseleave: function (e) {
}
}, ".target-class");
where your HTML structure is something like:
<div id="tabs_container">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tabs_content_container">
</div>
</div>
and your code already is doing something like:
$("#tabs_container").on("click", function () {
$.get($(this).attr("href"), function (data) {
$("#tabs_content_container").html(data);
});
});
Reference:
http://api.jquery.com/on/#direct-and-delegated-events
Related
I have a problem with nanoScroller. I am using Angularjs on the porject.I've a directive where I want to call the nanoScroller. It looks like this:
<a ng-click='show-me'>Show Me</a>
<div class='nano' ng-show='show-me' style='height:100px'>
<ol class='nano-content'>
<li ng-repeat='post in posts'>
{{post.title}}
</li>
</ol>
</div>
I need that .nano element has the scroller. When I press show-me, div opens which has a height of 100px. I also make a call of nanoScroller in this directive: angular.element(".nano").nanoScroller()
But scroll doesn't appear.
Maybe this is related to the fact that nano elements are not present on the page yet and nanoScroller is already called for it?
I tried to use nanoScroller directive but I get the following bug with it: when changing the height of the div with "This is item" content, scroll of the whole page moves up. This can be replicated by scrolling the page to the bottom and pressing Add item button several times.
Please help.
Thanks.
You're going to have to call .nanoScroller() when you know the element is visible. I recommend wrapping it in a timeout so it will update when the DOM is updated, by adding the following to your Angular Controller methods that handle changes to posts (i.e. getPosts(), addPost(), etc)..
// refresh nanoscroller
setTimeout(function() {
$(".nano").nanoScroller();
}, 250);
In your case, you'll also need to add it to your show-me method, unless show-me is a simple boolean, in which case you'll need to pop the setTimeout() into a $scope.$watch() block that watches for changes to show-me, something like this (again, in your Controller)..
$scope.$watch('show-me', function(newValue, oldValue) {
if (newValue === true) {
// refresh nanoscroller
setTimeout(function() {
$(".nano").nanoScroller();
}, 250);
}
});
Here's a Wrapper for nanoScrollerJS with AngularJS lifecycle integration.
https://github.com/maxaon/angular-nanoscroller
DEMO PLUNKER
I know this has been asked many times here, actually I found plenty of questions, each of them with a very good answer, I also followed those answers, used the different ways I found but I still don't get it to work.
What I'm trying to do is to load an image into a div, after clicking a link, instead of redirecting to a new page.
I'm using Pure Css (http://purecss.io/) to create a menu, the menu is made of a list, and each list item has a link inside it, like so:
<div class="pure-menu pure-menu-open" id="vertical-menu">
<a class="pure-menu-heading">Models</a>
<ul id="std-menu-items">
<li class="pure-menu-heading cat">Menu heading</li>
<li>Model 1</li>
</ul>
</div>
In that same html file, I have another div where I want to load the image:
<div id="model-map"></div>
I've tried the following ways, using jquery, in a separate js file:
I followed the selected answer for this question, which seemed to have the best approach (Can I get the image and load via ajax into div)
$(document).ready(function(){
console.log("ready"); //this shows on console
$('.model-selection').click(function () {
console.log("clicked"); //this doesn't show after clicking
var url = $(this).attr('href'),
image = new Image();
image.src = url;
image.onload = function () {
$('#model-map').empty().append(image);
};
image.onerror = function () {
$('#model-map').empty().html('That image is not available.');
}
$('#model-map').empty().html('Loading...');
return false;
});
});
As you see, the console.log("clicked") never executes, I'll be ashamed if it's something stupid, cause it seems that the function is not handling the click event properly.
I get the image of course, but in a new page (default behavior of clicking the href) and I want it to load on the div without being redirected. I hope you can help me.
Thanks in advance!
Edit
The code above is working, and both answers are correct, the issue was due to some code inside tags in my html ( YUI code to create the dropdowns for the menu) and it was conflicting with my js file. I moved it to the actual js file and now it works as expected.
Thanks!
You need to use event.stopPropagation();
$('.model-selection').click(function( event ) {
event.stopPropagation();
// add your code here
});
You just need to prevent the default behavior of moving to a new page for <a> tags, to do this say e.preventDefault() first:
...
$('.model-selection').click(function (e) {
e.preventDefault(); // Stops the redirect
console.log("clicked"); // Now this works
...
)};
...
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!
so i am a begginer and i really need help
so i wrote this function down here;
the objective was to take as parameters an element name , a div tag selector and a php file address,
function navigation($nav,$container,$link)
{
$($nav).click(function(){
$($container).slideUp(500,function(e){
$(this).append("<span>");
$(this).load($link);
});
});
{
$($container).ajaxComplete(function(){
$(this).slideDown(500);
});
}
{
$($container).slideUp(500);
}
}
the usage is simple
navigation("#home",".content","home.php");
navigation("#about",".content","about.php");
navigation("#store",".content","right.php");
the html is just a few <div> one with class=".content" tag and <a> links called #home #about #store the pages in php are just plain html inside them;
now the problem is when i click the link it works but i can find how to make he active link unclickable after it becomes active
and i was about to do a sublist with the same function trying to load a little div under the navigation links that contain links but i cant find how to do
any one of pro's have any idea ???
I can help but it's going to be quite a rewrite.
Firstly, give all your navigation items a class. Inside the nav items (I don't know if they're div, li elements or whatever, put an <a> tag with the src set to the page you want the navigation to load. When done it might look something like below:
<ul id="navigation">
<li class="nav">
<a src="home.php">HOME</a>
</li>
<li class="nav">
<a src="about.php">ABOUT</a>
</li>
<li class="nav">
<a src="right.php">RIGHT</a>
</li>
</ul>
Then use jQuery's onload functionality to bind the click event onload, rather than calling your navigation function 3 times. You grab the src from the child <a> tag of the li clicked.
$(function()
{
$('.nav').click(function()
{
if($(this).hasClass('active'))
{
return false;
}
$(this).siblings('li').removeClass('active');
$(this).addClass('active');
$('.content').slideUp(500).load($(this).children('a').attr('src'),
null,
function(){$(this).slideDown(500);}
);
return false;
});
});
Note the return false; is important to prevent the default action of the link (i.e. sending the user to the other page).
There's several approaches to making a link unclickable. One would be to let the click-event unbind itself:
$('nav')click(function(){
//Your code goes here
$(this).unbind('click');
});
Another would be to manipulate its CSS to hide the element (set display to none).
As for the second part of your question, i don't really get what you want to do. If you want to have a popout under the link, that activates on hover, you can see here how that could be achieved by using an <ul> and its :hover event
http://jsfiddle.net/D3AP2/
I have a (parent) window containing JQuery tabs:
<div id="tabs">
<ul class="tabHeader">
<li><a href="?ctrl=doSomething" title="#tabs-something">
Awesome function</a></li>
<li><a href="?ctrl=showSettings" title="#tabs-showSettings">
Settings</a></li>
</ul>
</div>
Within #tabs-showSettings, I require in certain cases a new window, which I open using the following code:
window.open('?control=showSetting&server='+server,
'serverSettings','width=400');
That works fine. But within this window, I require a function to submit the entered data (works correctly), refresh the div within the parent (fails) and close the child window (works). That's what I tried:
// #1: the following would refresh the div within the child ;(
parent.$('div#tabs-showSettings').load('?control=showSettings');
// #2: the following doesn't seem to have any effect
window.opener.$('div#tabs-showSettings').load('?control=showSettings');
Please tell me what I'm doing wrong. Many, many thanks!
Solution:
$("div#tabs-showSettings", window.opener.document).load(
"?control=showSettings", function(){
window.close();
});
Try parent as the context:
$("div#tables-showSettings", window.opener.document)
.load("?control=showSettings");
Update:
Some of the comments following suggested the need to have the window close after the updates are done - that should be handled in the callback:
$("div#tables-showSettings", window.opener.document)
.load("?control=showSettings", function() { window.close(); });