Angularjs - Jquery loading - javascript

I have somesthing strange happen here.
I got the following directive:
app.directive('addscroller', function () {
return function (scope, elm, attrs) {
// jQuery Script triggern
// AngularJS: jQuery(selector) = element.
elm.ready(function () {
elm.nanoScroller({ alwaysVisible: true });
})
}
});
I'm adding it to this code:
<div ng-show="datenschutz" class="alldealermodal">
<p ng-show="loading">Loading...</p>
<div>
<h1 class="headline">DATENSCHUTZ</h1>
<div class="closebtndiv">Close</div>
<div class="clear"></div>
<div class="nano" addscroller>
<div class="content"><p>BIG LONG TEXT</p></div>
</div>
</div>
<div class="fadeout"></div>
</div>
On click on this link,
<p>Datenschutz</p>
it opens the overlay "datenschutz" as seen above (ng-show="datenschutz"). The toggle works great BUT....
When I directly open the div after the page shown up, I see the scroller loading and appearing fine. It works.
But If I wait some moments, just a few seconds and then I open the "datenschutz"-overlay, the scroller isn't loaded and doesn't load at all.
I have something similar for a second overlay and this happens too.
EDIT / UPDATE:
I figured out, that the problem is, that jQuery cannot apply the script to an element which is hidden. When I quickly open the div before the $last element in the ng-repeat (inside the div) has loaded, it works, because the div is visible.
Does anyone know a workaround for that?

Solution 1 (Quick and Dirty):
Used AngularUI fpr the "ui-toggle" directive. It toggles ui-hide or ui-show as class into the element.
Afterwards used this CSS:
.ui-show {opacity:1;visibility: visible;}
.ui-hide {opacity:0;visibility: hidden;}
Worked for me in Chrome 24 and Firefox 18.
If someone got some other solutions, please post. My solution is maybe not the best one.

Related

Responsive Multi-level Navigation bug

I have a small issue with Micah Godbolt's Responsive Multi-level Navigation with active parent links. It works great, except if the page loads slowly and you are hovering over the global nav, it can sometimes show two dropdowns. I'm guessing this is cause the javascript is not loading quick enough. Was wondering if anybody knew of an easy fix.
Here is the site I am using it on : http://library.buffalo.edu
If you refresh the page and hover over the links before the page fully loads, you see the problem screenshot of issue
I assume you are hiding your dropdowns with javascript so you could add style="display: none" on your divs or css and use hover function.
you havent post your html but here's example
$(".parent").mouseover(function() {
$(this).next("ul").show();
});
$(".parent").mouseleave(function() {
$(this).next("ul").hide();
})
or you can replace those with one click function and use jQuery toggleClass to toggle a class that have display: block on it
Below function will work. Try this
$(".nav-global li").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);

Jquery click/toggle not working on mobile

I tried some old answers from other questions, but none of them resolved my case. The toggle function is not working fro me. Below is the jquery:
jQuery(document).ready(function($) {
$(".team-member").click(
function() {
$(this).children(".description").toggle();
}
);
});
HTML:
<div class="team-member" data-style="meta_below">
<img alt="yes" src="source/to/img.jpg" title="Candice Rauter">
<h4 class="light">Name</h4>
<div class="position">Position Goes Herer</div>
<p class="description">blablabla</p>
</div>
Link for the section of the website(#our-team section).
Any help would be appreciated!
Thanks!
When you inspect your site on mobile, using sdk and Chrome, you get
Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
warnings on your page.
Try using .on('click') rather than .click()
$(".team-member").on('click', function(){
$(this).children(".description").toggle();
});
This should work even for dynamically added elements. And I think your page is using ajax to load its content (from what I can see in the inspector).

jQuery drop in Social Sharing Buttons at the Bottom if inline buttons are not on screen

I'm looking for an Event which is triggered as soon as an Element (inline sharing buttons) scrolls out of page. I'd like to use this to trigger the drop in of social sharing buttons from the bottom of the page. You may have seen such side behaviour already on buzzfeed.com on mobile devices. If the sharing buttons come back in, the bottom sharing buttons should fade out again.
I'd prefer to only use CSS3 however I think some js (jQuery) may be necessary.
Anyone knows a library or some lines of code doing this?
Thx I really appreciate your expertise!
You could try like this
JS:
$( window ).scroll(function() {
if($( window ).scrollTop() >= socialButton.offset().top + socialButton.outerHeight())
hiddenSocialButton.stop().animate({'bottom': 0}, 100);
else
hiddenSocialButton.stop().animate({'bottom': -hiddenSocialButton.outerHeight()}, 100);
})
jsfiddle demo
Please refer to this question. Used the reference to code this
HTML :
<div class="container">
<div class="social_links">Social Links</div>
<div class="bottom_links">Bottom Links</div>
</div>
JS :
function triggerFunction()
{
if(isScrolledIntoView('.social_links'))
{
$('.bottom_links').fadeOut();
}else{
$('.bottom_links').show();
}
}
DEMO HERE

Responsive Durandal dialog

I'm using Durandal in my new application and I have an issue with Durandal's dialog window (I'm using it to get some data from users).
When I set width of window manually, (by default Durandal set window position from JavaScript) and if I want to have window width 600px , I need to do that through CSS with .dialog { width: 600px! important}. and that's where all the problems starts.
On window resize, dialog is not responsive anymore, and when I have big form in it and window height is small, for example on laptops I cant see a half of my form and I don't get any scroll.
On mobile devices it's a total mess. Does anyone knows how to make this thing work?
I believe the Durandal modal is receiving love in Durandal 2.1 although I do not know if it will be responsive.
In the meanwhile, Durandal provides all the hooks you need to implement your own modal functionality - including the ability to define different types of modal dialogs. You can read more about it here:
http://durandaljs.com/documentation/Showing-Message-Boxes-And-Modals.html
I experimented briefly with this via some code found on google groups and was able to get bootstrap 3 modals working.
You're welcome to try it out and see if it works for you. Note that you must be using bootstrap 3 for this to work (durandal 2.0 starterkit etc comes with bootstrap 2)
In dialog.js, just before return dialog;
dialog.addContext('bootstrap', {
addHost: function (theDialog) {
var body = $('body');
$('<div class="modal fade" id="myModal"></div>').appendTo(body);
theDialog.host = $('#myModal').get(0);
},
removeHost: function (theDialog) {
setTimeout(function () {
$('#myModal').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
}, 200);
},
compositionComplete: function (child, parent, context) {
var theDialog = dialog.getDialog(context.model);
$('#myModal').modal('show');
},
attached: null
});
and then activate with:
dialog.show(viweModel, null, 'bootstrap')
or I believe this would work also but I didn't test it:
dialog.showBootstrap(viewModel)
And your view should follow the markup pattern:
<div class="messageBox">
<div class="modal-header">
Header Markup
</div>
<div class="modal-body">
Body Markup
</div>
<div class="modal-footer">
Footer Markup
</div>
</div>
Here is the gist where I got the code:
https://gist.github.com/webm0nk3y/7603042
And the relevant google groups thread:
https://groups.google.com/forum/#!topic/durandaljs/8g7DDCuvlpU
If you want to disable the width-setting for custom modals, you can add the following style definition to your outermost div:
<div style="width:auto;">
Please note that this can cause strange behaviour in some browsers.
If there is something else you would like to have for MessageBoxes or Modals, especially for their positioning and sizing, please let me know and I can make some changes to the code. My email is tommi.gustafsson at loyalistic.com.
UPDATE 14 Jan 2014:
I made a new revision of dialog.js, which helps with problems with customizing the MessageBox (not custom modals). You can find it at:
https://github.com/TommiGustafsson/Durandal/blob/master/src/plugins/js/dialog.js
(That's still unofficial, since it's in my fork of Durandal.)
You can find the instructions how to use it here:
https://github.com/BlueSpire/Durandal/pull/362#issuecomment-32180718
If you have problems with MessageBox, I think this might help you.

Jquery sliding div disappearing

I'm doing a jquery site and I have a slide in and out div that I'm using to show share buttons. I'm using the same code on multiple pages. On my first page it works great with no problems but every other page the div will slide out but slide right back in. It doesn't stop. Very confused.
Here I have a fiddle and in the fiddle it works great! But when I use the same code on other pages it's not working correctly. http://jsfiddle.net/4hUzH/
<script>
$(function() {
$('.toggleNotes').click(function() {
$nextArticle = $(this).next('.article');
$nextArticle.is(':visible') ? $nextArticle.slideUp() : $nextArticle.slideDown();
return false;
});
});
</script>
<style>
.article {
display: none;
}
</style>
Click here
<div class="article">
This is where the buttons show up.
</div>
Can anyone explain why it slides out and right back in?
Turns out in my top.php I was also calling the same function. So it was calling the instance twice. It only needs to be called once. Silly mistake.

Categories