mootools inject function - javascript

I have span which i crate like this:
new Element('span', {'class': 'file-img', 'html': 'Image'})
I want to inject image to it:
var my_img = new Element ('img' , {'src' :'uploading/abc.jpg' ,
'style' : 'width:50px; text-align:left' }).inject(file-img, 'top') ;
It's not working.
Thanks for your help.

this would work (mt 1.2+):
new Element('span', {
'class': 'file-img'
}).inject($(document.body)).adopt(new Element("img", {
'src' :'uploading/abc.jpg',
styles: {
width: 50,
textAlign: "left"
}
});
but if you are trying to use file-img as a reference to the CSS class of the span you have created, then you need to use document.getElement("span.file-img") as your target container. and - don't use - in the class names, if you can help it. use _ instead, - implies subtraction and may have an effect on CSS selectors.
another way to do this is to assign it to a variable
for example,
var file_img = new Element("span" ... );
...
someObj.inject(file_img);

What is file-img ??? it looks like a variable but actually it tries to subtract img from file ... looks like the error is there. Variables can't have dashes in their name in javascript

Related

element properties in jQuery

i'm new to jQuery. so in javascript you can create a div and give it it's own properties like this :
var msgbubble = document.createElement('div');
msgbubble.marginTop="10px";
msgbubble.style.backgroundColor="#ccc";
is there is anyways i can create an element like this in jquery and how to append it.
Thanks.
Check this code snippet to create div element with some css properties and set other attributes using jQuery.
$(document).ready(function() {
let elem = $("div"); // create div element and reference it with `elem` variable
// Set css properties to created element
elem.css(
{
'background-color': 'red', 'marginTop': '50px',
'height': '200px', 'width': '200px'
}
);
// Set attribute to created element
elem.prop(
{
'id':'div1', 'class': 'myClass'
}
);
$('body').append(elem);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
For more info on jQuery visit https://www.w3schools.com/jquery
Hope, this small code snippet works for you.. :) :)
A small example of creating a div, setting properties, and appending it:
var msgBubble = $('<div></div>');
// set css properties
msgBubble.css({
'margin-top': '10px',
'background': '#ccc'
});
// or set html attributes
msgBubble.attr({
'data-foo': 'bar'
});
// add some text so it actually has a height
msgBubble.text('message bubble');
$('span').append(msgBubble);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span></span>
With jQuery(html) you can pass html text, which will then create an element.
var element = jQuery('<div></div>');
And if passed a second argument for attributes, jQuery(html, attributes), it will use those and set them on the element.
var element = jQuery('<div></div>',{
css:{
marginTop:'10px',
backgroundColor:'#ccc'
}
});
To append you can use the various methods like append(), appendTo().
element.appendTo(document.body);
So if you wanted to create your element, set the styles, and append the element in one go you would combine all of these like so:
jQuery('<div></div>',{
css:{
marginTop:'10px',
backgroundColor:'#ccc'
},
text:"Some text to go into the element"
}).appendTo(document.body);
jQuery simply uses the .append() method, though it also has .appendTo(), which functions the same way, although the two are syntactically different.
$("span").append("Appended text");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span></span>
Ass for the actual stylisation, that can be done directly through the .css() property:
el.css('margin-top', '10px');
el.css('background-color', '#ccc');
Hope this helps! :)

How to update 'src' attributes of multiple images?

I have the following source:
<body>
<div class="slideshow_top">
<img class="slideshow_image" src="img/cycle/putritos.jpg">
</div>
<div class="slideshow_mid">
<img class="slideshow_image" src="img/cycle/stage.jpg">
</div>
<div class="slideshow_bot">
<img class="slideshow_image" src="img/cycle/marketing.jpg">
</div>
...
</body>
Assuming I have three generated new src values such as:
var src1="img/cycle/newimage1.jpg
var src2="img/cycle/newimage2.jpg
var src3="img/cycle/newimage3.jpg
How can I change the source values of the already existing images? I'm unsure because I know the surrounding divs of the images are uniquely named, but the class of the images themselves are shared. Is it still possible to update each source attribute with Javascript given this?
Looks like part of your question has to do with selecting images only if they are a child of a slideshow_top/mid/bot div element. There's a few ways to do this...
In jQuery, you could do this:
$('.slideshow_top img').attr('src',src1);
$('.slideshow_min img').attr('src',src2);
//etc.
That's just a simple Sizzle CSS-style selector. You can also use jQuery's .children() method, if you want:
$('.slideshow_top').children('img').attr('src',src1);
In plain old JavaScript it's a little more wordy, but you can still do it:
var slideShowTop = document.getElementsByClassName('slideshow_top'),
slideShowTopImage = slideShowTop[0].getElementsByTagName('IMG');
slideShowTopImage[0].setAttribute('src',src1);
//etc.
Note though, that getElementsByClassName isn't supported in version of IE less than 9, so you'll have to write your own little function to, say, loop through all elements by tag name and filter them by className, etc. jQuery might be the way to go on this one...
You can do something like:
var new_images = $.map([1,2,3], function(x) { return "newimage" + x + ".jpg"; })
$("img").each(function(i, x) { x.src = new_images[i]; })
var src_array=["img/cycle/newimage1.jpg","img/cycle/newimage2.jpg","img/cycle/newimage3.jpg"]
$(".slideshow_image").each(function(index){
$(this).attr("src",src_array[index])
})
Try
.each( function(index, Element) )
Iterate over a jQuery object, executing a function for each matched element.
//create array of images
var arrSrc = ['img/cycle/newimage1.jpg','mg/cycle/newimage2.jpg','img/cycle/newimage3.jpg'];
$('.slideshow_bot .slideshow_image').each(function(i, el){ //to loop through images
el.prop('src',arrSrc[i]); //set image here
});
.prop( propertyName, value )

How do I remove an .append() then add an .append()

This is to show a check for a diagnostic page. I have an .append(not_ok) but when the swf file is 100% loaded I want to remove the not_ok append then add an .append(ok).
function callbackfunk(e){
$(".FlashNotLoaded").css("color", "red").append(not_ok);
var timer = setInterval(function(){
if(e.ref.PercentLoaded() === 100){
$(".FlashLoaded").remove();
$(".FlashLoaded").css("color", "green").append(ok);
}
}, 1000);
}
swfobject.embedSWF("/static/diag/countdown.swf", "flashDiv", "550", "400", "8.0.0", "expressInstall.swf", flashvars, params, attributes, callbackfunk);
The .append(not_ok) will be removed but the .append(ok) will not replace it. I've tried
.replaceWith(ok) but that doesn't seem to work either.
Generally with jQuery, you do that by leaving both on the page in the same spot. jQuery(notOkSelector).hide(); and jQuery(okSelecter).show();.
Hide makes the object display:none, and show reverses this.
EDIT: As long as the objects are already in the DOM (by default with display:none;)...
To show notLoaded:
$(".FlashLoaded").hide(); // it doesn't hurt to hide an already hidden object.
var notLoaded = $(".FlashNotLoaded");
notLoaded.css( 'color', 'red' );
notLoaded.show();
To hide notLoaded and show ok:
$(".FlashNotLoaded").hide();
var flashLoaded = $(".FlashLoaded");
flashLoaded.show();
flashLoaded.css( 'color', 'green' );
EDIT including your above code: Your coude may look like the following...
function callbackfunk(e){
$(".FlashLoaded").hide();
$(".FlashNotLoaded").css("color", "red").show();
var timer = setInterval(function(){
if(e.ref.PercentLoaded() === 100){
$(".FlashNotLoaded").hide();
$(".FlashLoaded").css("color", "green").show();
clearInterval(timer);
}
}, 1000);
}
this line
$(".FlashLoaded").remove();
removes the element(s) from the DOM, so the following line can't append anything to the DOM
$(".FlashLoaded").css("color", "green").append(ok);
I suppose you wanted to remove ok instead.
Are you appending new HTML tags? If so you can use jQuery replaceWiht() , it replace an existing element with a new element.

jQuery, selecting just number from id like "article-23"

All right, I have a div tag which got a class="blog-post" and id like id="article-23" (where "23" could be any number, as it is id of blog post in a database). I need to somehow get just a number from that id and than apply some rules to that div tag. So say:
if number from id % 2 == 0 {
set text colour black to associated div tag with class of blog-post
} else {
set text colour white to associated div tag with class of blog-post
}
Thats just a "pseudo" code to show logic that I wan't to apply dependent if number from id is even or odd, but the question remains same, how do I just get number from id like "article-23" ?
As simple as
var number = "article-23".match(/\d+/)[0];
But you have to be sure that any digit exists in the string, otherwise you'd get a error.
You can actually apply rules via function, which makes this the cleanest solution (in my opinion):
$(".blog-post").css('color', function () {
return +this.id.replace('article-', '') % 2 ? 'blue' : 'red';
});
http://jsfiddle.net/ExplosionPIlls/Jrc5u/
Try this:
$('.blog-post[id^="article-"]').each(function () {
if (parseInt(this.id.replace('article-', '')) % 2 === 0) {
$('#' + this.id).css('color', 'black');
} else {
$('#' + this.id).css('color', 'white');
}
});
jsFiddle Demo
As an alternative, HTML5 supports these things called "data attributes", which are specifically meant for attaching data to your DOM without abusing things like the "class" or "id" attributes. jQuery provides a handy .data method for reading these attributes in a more obvious way.
You can add your own numeric ID attribute using something like "data-id":
<div class="blog-post" data-id="23" />
$("#blog-post").each(function () {
console.log($(this).data("id")); // Look up the data-id attribute
});
If I'm understanding correctly, you want the number after the hyphen of the id tag of your .blog-post class.
var article = $(".blog-post").attr('id'); //get the id
var article = article.split("-"); // split it on hyphens
return article = article[article.length-1]; // return the last element

Is there a way to find all elements matching a certain style using the DOM?

I want an array of all elements that have fixed position.
This is what I've got so far (mootools code)
$$('*').filter(function(aEl){ return aEl.getStyle('position')=='fixed' });
Is there a more direct way to do this?
not really, what you posted is the best way of doing it.
but if it's something you do more often, I'd consider abstracting it to a pseudo selector:
Selectors.Pseudo.fixed = function(){
return this.getStyle("position") == "fixed";
};
// can now use it as a part of a normal selector:
console.log(document.getElements("div:fixed"));
p.s. this will break in mootools 1.3 as slick uses a different selectors engine.
to make it work in 1.3 do:
Slick.definePseudo('fixed',function() {
return this.getStyle("position") == "fixed";
});
and finally, to make it more versatile so you can look up any CSS property as a part of the selector, you can do something like this:
Selectors.Pseudo.style = function(key) {
var styles = key.split("=");
return styles.length == 2 && this.getStyle(styles[0]) == styles[1];
};
and for mootools 1.3:
Slick.definePseudo('style', function(key) {
var styles = key.split("=");
return styles.length == 2 && this.getStyle(styles[0]) == styles[1];
});
how to use it:
console.log(document.getElements("div:style(position=fixed)"));
http://www.jsfiddle.net/h7JPS/3/
I would suggest you to make a css class
.fixed_pos
{
position: fixed;
}
apply this class to elements that you want and then
$$(".fixed_pos");
That will give you to all the element

Categories

Resources