We Keep Coding

Using JS how to change HTML tag attributes (alternative to document.write() )

I am using an outside API that allows me to send extra parameters inside the image src value, like so
<img src="myImage.jpg?resize=width[scrW]">
The problem is that I don't know what the width variable(scrW) is until I start loading the page. I use <script> var scrW = window.innerHtml </script> to get the width I need.
I tried using
<script>
document.write('<img src="myImage.jpg?resize=width['+window.innerHtml+']">')
</script>
but the problem with that is that document.write displays everything in text until the document is ready (or reaches </body>). And that just looks tacky.
My question is: How can I append/prepend JS variables to src attribut values during the page rendering?

How about just solving the problem of the text showing up before the page renders? That's easy. Just make sure your code doesn't run until the page's HTML is completely loaded.
Vanilla JS solution:
<script>
// self executing function here
(function() {
// your page initialization code here
// the DOM will be available here
document.write('<img src="myImage.jpg?resize=width['+window.innerHtml+']">');
})();
</script>
Using jQuery:
<script>
$(document).ready(function() {
document.write('<img src="myImage.jpg?resize=width['+window.innerHtml+']">');
});
</script>

How about you give your image src some default resize value and when the page is loaded it will be updated. I have given the img an id of "myImage" so that I can access that in JavaScript code.
Here is the HTML:
<img id="myImage" src="myImage.jpg?resize=width[180]">
Insert this JavaScript at the end:
<script>var scrW = window.innerHTML;
document.getElementById("myImage").src = "myImage.jpg?resize=width["+scrW+"]";</script>

How to hide broken images in Angular app

I've built an Angular app that utilizes the Instagram API to pull in images. If a user later deletes an image I end up with broken images (404's).
I've attempted to use jQuery to hide the div containing these (broken) images, but they still appear.
I've placed the following jQuery in a 'custom.js' file that I reference in my 'index.html' file:
$(document).ready(function() {
$("img").error(function() {
$(this).parent().hide();
});
});
I reference jQuery then 'custom.js' in the head of 'index.html' as follows:
<script src="libs/jquery/dist/jquery.min.js"></script>
<script src="js/custom.js"></script>
...and here is the html I'm attempting to apply this jQuery to:
<a ng-href="{{image.link}}" target="_blank" title="{{image.text}}"><img ng-src="{{image.img}}" alt="" class="img-responsive" ng-style="homeColors" id="image"></a>

I ended up using the following Javascript to hide my images. The first function hides the grandparent of my image so that the entire div is hidden. The second function replaces missing user profile images with Instagram's anonymous user image:
function imgError(image){
image.parentNode.parentNode.style.display = 'none';
}
function anonImg(image){
image.src = 'https://instagramimages-a.akamaihd.net/profiles/anonymousUser.jpg';
}
Just add the following HTML to the respective images:
onerror="imgError(this);"
onerror="anonImg(this);"

Try removing src attribute from broken images instead, but i think this still may not work, because angular could bring this attribute back.
If this won't work, please try this:
https://stackoverflow.com/a/17122325/4229156

Jquery div fadeIn on load not working

I just have a Div ".text" that i want to fade in on a subdomain page… I googled on stackoverflow and came up with this:
<script type='text/javascript'>
$(function(){ // $(document).ready shorthand
$('.text').hide().fadeIn('400');
});
</script>
The CSS is just font styling… I even tried it before with a display:none; and without the .hide() but somehow it does not work… I load this jQuery:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
Do I need another one? Or do I need to name the subdomain in the script? I wanted to put the script in my index.php file… I just can not explain it to myself…

Load the script file next to including the Jquery plugin.
Since there is no fault in your code.
This may be the problem.

I think because you are feeding in fadeIn('400') 400 is an int value not a string. Try using
fadeIn(1600)
and you might see a more noticeable fade effect.

Hide Image when another image is clicked

this seems to be simple.. but I am a bit noobish with jquery, maybe I am doing something silly wrong?
I want to click an image, and on that click, hide another image right next to it.
<script type="text/javascript">
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
</script>
Id's are correct as per the two images. What am I missing? Debugging it, the code never gets fired...
Thanks
EDIT
I had my control as a nested control on an asp masterpage, and its id was being rewritten. I have now fixed the id, but I still cant get any joy... I also see my markup is being rendered as an "input", would that make a difference?
<head>
<script src="js/jquery.min.1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#butShowMeSomeUnits").click(function () {
$('#arrowUnitspic').hide();
});
});
</script>
</head>
<body>
<input type="image" src="bookings_media/buttons/show-me-some-units.png" onmouseout="this.src='bookings_media/buttons/show-me-some-units.png'" onmouseover="this.src='bookings_media/buttons/show-me-some-units_orange.png'" id="butShowMeSomeUnits" name="ctl00$ctl00$ContentPlaceHolder1$bookings_right_content$butShowMeSomeUnits">
</body>
EDIT
JS Fiddle
If there is any confusion... the JS fiddle I spooled up with the exact code also does not work...

You need to do do on page ready:
<script type="text/javascript">
$(document).ready(function() {
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
</script>
Edit:
The fiddle you provided did not work until I chose jQuery 1.10.1 from the dropdown. You will notice your onmouseover changes the element first, but once you click on the input it does hide the image. Can you verify this works the same for you?
If the answer is no then I don't think you are loading the jQuery library on your page. To check this should work:
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}else{
alert("jQuery library is not found!");
}
In addition it might be helpful to see what errors your browser console /dev tools is showing.

Wrap the code in jQuery.ready() event. And also check whether jquery js file is loaded or not.
$(document).ready(function(){
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});

You code looks good and works check here
What you might be missisng is either:
to load jQuery script in the head of your page.
to include $(document).ready(function() { //code here }); in case your <img> tags are after the script in the page code. This is so your code loads when page is ready/loaded.

Steps that may help you:
make sure you integrate jQuery lib right. (to check that you might wanna open console on chrome and type $("html").hide(); and see if the current page dissapears)
make sure your custom JS file or code is UNDER the including of jQuery lib.
very good starting point with jQuery is to put everything in $(document).ready() as below example:
$(document).ready(function(){
$("img").click(function(){
$("img").hide();
$(this).show();
});
});

How to make something load first before another in javascript and jquery

I have a div with text in it and a background image. When I load the page the text always appear 1st(assume i have low speed internet connection). How can i make the background image load before text? Can You please give me solution in both jquery and javascript

Add the text in the onload event handler for the image.
Note: If you want to keep using a div tag with a background image rather than an img tag, you'll have to add the text during the window.onload event (see this answer for the details).

Assuming your div looks like this:
<div id="Derp" style="CSS-for-background-image-here">Magical ponies!</div>
I would try removing the text completely and then add this kind of jquery call:
<script>
$(document).ready(function() {
$('#Derp').load(function() {
$('#Derp').text("Magical ponies!");
});
});
</script>
The $('#Derp').load(...) is the key here. See the docs for load(). It has an example of exactly what you need.

you could populate the content onload.
Start with this:
<div id="content"></div>
Then, in jquery, do this:
$(document).ready(function() {
mybg= new Image();
mybg.onload=function(){
$('#content').html('YOURTEXTHERE');
}
mybg.src = "PATH/TO/IMG";
});

your simple answer is .load you can do when your window gets loaded fully and then text appears:
$(function(){
$(window).load(function() {
$('p').fadeIn(800);
});​
});
what this is doing is fading in the p tag with text when whole window gets loaded.
you can find a demo here: http://jsfiddle.net/a5P8b/