I have a jquery code that checks for the class .slide on pageload. I have .slide classes inside my templates that it doesn't find and I am trying to figure out a way to make them find it. (probably by making a directive?)
If anyone has any ideas, I'd greatly appreciate it.
The code is as follows:
var items = $('.slide');
var content = $('.content');
function open() {
$(items).removeClass('close').addClass('open');
}
function close() {
$(items).removeClass('open').addClass('close');
}
$('#navToggle').on(clickevent, function(event) {
event.stopPropagation();
event.preventDefault();
if (content.hasClass('open')) {
close();
} else {
open();
}
});
content.click(function() {
if (content.hasClass('open')) {
close();
}
});
You can create a directive with the same name as your class name:
Say you have two spans with one you need to distinguish using class 'myclass':
<div ng-app="ClassExample" ng-controller="someController">
<span class="myclass myotherclass">target span</span><br/>
<span class="myotherclass">other span</span>
</div>
Then the accompanying js code would include a directive definition using the name of the class 'myclass' and you can restrict this directive to classes using restrict:'C' :
angular.module('ClassExample',[]).directive('myclass', function() {
return {
template:'hello world',
restrict: 'C'
};
}).controller('someController',function() {
});
Here is the fiddle: https://jsfiddle.net/1L3h8y7s/1/
Related
With x-tag I am trying to find a way to extend every html element that I put is:"ajax-pop" attribute.
What I want to do is when I click an element with is:"ajax-pop" attribute I will do some dynamic ajax loads. It will be a good starting point for me to develop a manageble system.
I know I can do it with some different ways but I am wondering is there a way to do it like this way extends:'every single native html element'
xtag.register('ajax-pop', {
extends: 'WHAT SHOULD I WRITE HERE???',
lifecycle: {
created: function () {
},
inserted: function () {
},
removed: function () { },
attributeChanged: function () { }
},
methods: {
someMethod: function () { }
},
accessors: {
popUrp: {
attribute: {
name: "pop-url"
}
},
},
events: {
tap: function () { },
focus: function () { }
}
});
Type extensions must be defined element by element. A single custom element cannot extend multiple standard elements.
For, each custom element owns it own prototype, that can't be reused.
If you want to extend a button (for example), you have to write in JavaScript :
xtag.register('ajax-pop', {
extends: 'button',
...
And, in the HTML page:
<button is="ajax-pop">
...
You can do this using x-tag's delegate pseudo, and by adding a data- attribute to elements you wish to have this behavior:
<article data-pop="/path/to/content.html"></article>
And your JavaScript would be something like this:
xtag.addEvent(document.body, 'tap:delegate([data-pop])', function (e) {
var uri = this.getAttribute('data-pop');
$.get(uri).done(function (res) {
this.innerHTML = res;
}.bind(this));
});
Here's a codepen example:
http://codepen.io/jpecor-pmi/pen/Vexqyg
I believe you're going about using x-tag the wrong way. X-tag is meant to be used to implement entirely new tags; what you're trying to do is simply modify different pre-existing DOM elements. This can easily be done in pure javascript or more easily in jquery by assigning each desired element a shared class.
I have a plugin that im making use of called content.js http://innovastudio.com/content-builder.aspx
Im adding in dynamic divs to the page which I would like to have the content.js plugin assigned to it, so I can make use of its functionality.
On a single div, or already defined div within the page, I dont appear to have any issues with multiple divs.
However if I add in a div with the same class, I cant seem to bind the plugin to it.
Ive included the code for instantiating the div with the contentbuilder plugin, but I wondering if there is a way to bind it to new elements that are added to the page with the class of "letter". Or if there is a generic way of binding plugins to divs using jquery.
$('div.letter').contentbuilder({
enableZoom:false,
snippetOpen: true,
imageselect: 'images.html',
fileselect: 'images.html',
snippetFile: '/assets/templates/content-builder/default/snippets.html',
toolbar: 'left',
//sourceEditor: false,
onDrop:function(){
// function for when an item is dragged into the editable area
},
onRender: function () {
var coverLength = $("#coverpage div.row").length;
var mainContent = $("#maincontent div.row").length;
if(coverLength == 0)
{
$("#coverpage").html('<div class="no-content-on-page">Select your content from the right sidebar</div>')
}
else
{
$("#coverpage div.no-content-on-page").remove();
}
if(mainContent == 0)
{
$("#maincontent").html('<div class="no-content-on-page">Select your content from the right sidebar</div>')
}
else
{
$("#maincontent div.no-content-on-page").remove();
}
//custom script here
}
});
If you must add these divs in a dinamic way, i think that you should init the plugin for each time that you add a new div. To avoid init same div twice, use some class like in the following example:
function createLetter(){
$("body").append('<div class="letter mustBeActivated"></div>');
initContentBuilder();
}
function initContentBuilder(){
$('div.letter.mustBeActivated').contentbuilder({
enableZoom:false,
snippetOpen: true,
imageselect: 'images.html',
fileselect: 'images.html',
snippetFile: '/assets/templates/content-builder/default/snippets.html',
toolbar: 'left',
//sourceEditor: false,
onDrop:function(){
// function for when an item is dragged into the editable area
},
onRender: function () {
var coverLength = $("#coverpage div.row").length;
var mainContent = $("#maincontent div.row").length;
if(coverLength == 0)
{
$("#coverpage").html('<div class="no-content-on-page">Select your content from the right sidebar</div>')
}
else
{
$("#coverpage div.no-content-on-page").remove();
}
if(mainContent == 0)
{
$("#maincontent").html('<div class="no-content-on-page">Select your content from the right sidebar</div>')
}
else
{
$("#maincontent div.no-content-on-page").remove();
}
//custom script here
}
}).removeClass('mustBeActivated');
}
I'd like to disable a javascript function (dialogs()) using jQuery.
What I thought to do was:
Wrap the function in a span: "<span class = 'auto'>" + dialogs(i,0); + "</span>"
If the checkbox is checked, do: (this if statement is in $(document).ready(function(){)
if ($("#autodialog").is(":checked")) {
$(".auto").remove(); }
But this doesn't seem to be working.
Any thoughts?
Make your dialogs methods to handle a extra parameter isEnabled, a boolean dataType.
function dialogs(i,0,isEnabled) {
if(isEnabled) {
//Todos
}
}
then make it to look like this
if ($("#autodialog").is(":checked")) {
dialogs('i',0,false); //I'm not sure about the values of parameter i
}
So there is no need of using span tag as a wrapper.
Hope you understand.
A little more context would be helpful (do you have a jsfiddle we can see?)
I think you may be confusing the Javascript function and the value returned from the function. Are you trying to remove a string of HTML generated by the dialogs() function, or are you trying to remove the actual dialogs function itself?
If you want to disable the dialogs function:
<script>
function getDialogs(a,b) {
// ...
}
var dialogs = getDialogs; // Make dialogs refer to getDialogs
</script>
Elsewhere you'll have something like:
<script>
if ( $("#autodialog").is(":checked") ) {
dialogs = function __noop__() {};
} else {
dialogs = getDialogs;
}
</script>
you will have to add a click handler to the checkbox
$("#autodialog").click(function(){
if ($(this).is(":checked")) {
dialogs(i,no,false); }
else
dialogs(i,no,true);
});
function dialogs(i,no,flag){
if(!flag)
{event.preventDefault();return flag;}
else{
......//your working code}
}
I have a div
<div id="slideHolder" ng-mouseenter="fadeIn()" ng-mouseleave="fadeOut()">
...
</div>
And the content in the middle fades in an out on mouseenter/leave
$scope.fadeIn = function()
{
TweenLite.to("#zoomInButton",0.3,{opacity:1});
}
$scope.fadeOut = function()
{
TweenLite.to("#zoomInButton",0.3,{opacity:0});
}
Is it possible combine those two functions into one using an if statement ? I know how I'd do it in jQuery, but not sure how to in Angular. Thanks
Edit:
This is how I did it in jQuery
$("#slideHolder").hover(
function() {
$("#zoomButton").stop(true,true).fadeIn();
},
function() {
$("#zoomButton").stop(true,true).fadeOut();
}
);
Granted they are technically two function still, I was able to shorthand them into the hover method
I was able to figure this one out
<div id="slideHolder" ng-mouseenter="fade($event)" ng-mouseleave="fade($event)">
....
</div>
and in angular
$scope.fade = function(event)
{
(event.type == 'mouseover') ? TweenLite.to("#zoomInButton",0.3,{opacity:1}) : TweenLite.to("#zoomInButton",0.3,{opacity:0});
}
I am trying to make my jquery codes look better here. My functions are working correctly but I was wondering if anyone can make my codes less ugly. Thanks a lot!
HTML
<div class='image_layout'>
<a href='#'><img src=' a.jpg '/></a>
<br><p class='credits'>hahahah
<br>Agency: Agency1
<br>Picture ID: 5 </p>
</div>
jQuery
$('#image_layout').on('hover', 'img', function() {
$(this).parent().next().next().fadeIn('fast');
})
$('#image_layout').on('mouseout', 'img', function() {
$(this).parent().next().next().fadeOut('fast');
})
You can pass two functions to jQuery hover - one for mousein, one for mouseout. You can make this change as long as you don't have dynamically added images. Your code would also be a lot simpler if the element you are fading has an ID or class:
$('#image_layout img').hover(
function () {
$(this).closest('.someClass').fadeIn('fast');
},
function () {
$(this).closest('.someClass').fadeOut('fast');
}
);
$('.image_layout').on('hover', 'img', function (e) {
if(e.type == 'mouseover') {
$(this).closest('.image_layout').find('.credits').stop().fadeIn('fast');
} else {
$(this).closest('.image_layout').find('.credits').stop().fadeOut('fast');
}
})
You could also have done:
$('.image_layout').on('hover', 'img', function() {
$(this).closest('.image_layout').find('.credits').stop().fadeIn('fast');
}, function() {
$(this).closest('.image_layout').find('.credits').stop().fadeOut('fast');
});
If you're sure that nothing other than hovering the image will cause the element to fade, you could simply write:
$('.image_layout').on('hover', 'img', function() {
$(this).closest('.image_layout').find('.credits').stop().fadeToggle('fast');
});
Look into Douglas Crockford's JS Style Guide. He'd make your code look something like (with improvements):
var obj = $('#image_layout img');
obj.mouseover( function(){
$(this).parent([selector]).next([selector]).fadeIn('fast');
});
obj.mouseout( function(){
$(this).parent([selector]).next([selector]).fadeOut('fast');
});
You don't need the on, just call the function directly.
I would use .eq as opposed to two next statements, additionally, hover takes two functions, the first being for the mouseenter event, and the second for mouseout
$('#image_layout').hover('hover', 'img', function () {
$(this).parent().eq(2).fadeIn('fast');
}, function () {
$(this).parent().eq(2).fadeOut('fast');
})
References
Take a look at eq here
Read over hover here