Develop Reference

jQuery Waypoints Navbar In Bootstrap

I'm creating a website with Bootstrap, and I'm trying to make the navbar change transparency when it is past the header and reaches the main content, but I just can't seem to get it to do anything.
There aren't many tutorials on Waypoints for some reason so I'm not even sure I'm using it right in the first place.
For the main content I've created a Div with a class "test"
Here's the JS:
var $navbar = $('test');
$navbar.waypoint(function () {
$navbar.addClass('.js-navbar-animate');
});
CSS I'm using is quite simply:
.navbar{
opacity: 0.5;
}
.js-navbar-animate{
opacity: 1;
}

First, is that normal that for looking for your .test element you wrote:
var $navbar = $('test');
Instead of:
var $navbar = $('.test');
?
Also, I bet you're looking for that functionality from Waypoint.

Modify CSS classes using Javascript

I was wondering if there is an easy way to change the CSS classes in JavaScript.
I have gone through all other similar questions here and I couldn't find an straight-forward and simple solution.
what I'm trying to do is to set the width and height of a <div> to match an image that I have on my site (upon loading). I already know the picture dimensions and I can set my CSS to that - but I want my script to figure this out on its own.
After hours of r&d (I'm a beginner), this is what I came up with:
var myImg = new Image();
myImg.src = "img/default.jpg";
myImg.onload = function(){
var imgWidth = this.width;
var imgHeight = this.height;
document.getElementById("myBg").setAttribute('style', "height :"+ imgHeight + "px");
document.getElementById("myBg").setAttribute('style', "width :"+ imgWidth + "px");
};
However, this only sets the width of the element with id "myBg". If I reverse the order of the height and width, then it only sets the height to the image's height.
It seems like first it sets the height of the element to the image height but right after it moves to the next statement to set the width, the height value goes back to what it what defined originally in css.
I did further research online and seems like changing the css (inserting new attributes, removing, etc.) using JavaScript is not an easy task. It is done through
document.styleSheets[i].cssRules[i] or document.styleSheets[i].addRule
type of commands, but all the tutorials online and here on stackoverflow were confusing and complicated.
I was wondering if anyone familiar with document.styleSheets can explain this to me simply?
Imagine I have this class in my separate css file:
.container
{
height: 600px;
width: 500px;
}
I want the height and width to change to the dimension of the picture upon loading. How do I do this?
I don't want to define a new "style" element in my html file, I want to change the css file.
I'm not supposed to know the image dimension before it loads to the page.
no jquery please, I want to do this using only standard JavaScript.
Thank you.

The reason only one or the other works is because in your second line of code, you destroy the whole style attribute, and recreate it. Note that setAttribute() overwrites the whole attribute.
A better solution would be to use the element.style property, not the attribute;
var bg = document.getElementById("myBg");
bg.style.width = imgWidth + "px";
bg.style.height = imgHeight + "px";
You can grab all elements with class container and apply it to each of them like this:
var elements = document.querySelectorAll('.container');
for(var i=0; i<elements.length; i++){
elements[i].style.width = imgWidth + "px";
elements[i].style.height = imgHeight + "px";
}
Note querySelectorAll isn't supported by IE7 or lower, if you need those then there are shims for getElementsByClassName() here on SO.

If your rules start incrementing you could extract your css to a new class and switch classes:
CSS:
.container-1{
/* A set of rules */
}
.container-2{
/* A set of rules */
}
JavaScript:
element.className = element.className.replace(/container-1/, 'container-2')

var object = document.createElement('container');
object.style.width= "500px";
object.style.height= "600px";
You can also add values to this if you hold the dimensions in variables
var height = 600;
var width = 500;
You can increment when needed
height += 5;
Here is something you might find useful. It may offer you some insight on how you can solve a problem with many different approaches, seeing as though you are new to js.

Add Transparent Image on top of other Images with JavaScript

I need to add a Transparent image on top of all images on a page. The goal is if a user were to do a simple right click and save of an image, they would save the transparent image.
I do realize this is not a guaranteed method and that none exist to prevent image theft but simply a measure that a client wants added to prevent your average non tech person from saving images.
Using JavaScript I would like to find all images or all images within a certain Div.
Apply a new image overlay on top of these images that will have the same width and height of the image they are covering
I am not sure how to do this with JavaScript and was hoping someone would have a quick fix or example. I was unable to find anything so far on Google or SO. Appreciate any help
I have this JS which gets all images on a page so far...
// Get all images on a Page
function checkimages() {
var images = document.images;
for (var i=0; i<images.length; i++){
var img =images[i].src;
// Add new transparent image on top of this image
alert(img);
}
}

I would advise you to work with jQuery (or similar library) to keep things easier. I would even write a small jquery extension to make it easy to recycle the code, and apply it on any div (or other wrapper), wich child images you want to be overlayed.
My code would look something like this:
// jquery plugin to create overlays
// src is the url of the overlay image
// apply to any container that contains images to be overlayed
$.fn.overlayImages = function(src) {
// loop trough the images
$(this).find('img').each(function() {
// cache some variables
var $img = $(this);
var $parent = $img.parent();
// make the parent relative, if not yet absolute or fixed, for easy positioning
if ($parent.css('position') !== 'fixed' && $parent.css('position') !== 'absolute') {
$parent.css('position', 'relative');
}
// get the position of the image
var position = $img.position();
// clone the image
var $overlay = $img.clone();
// set the styling, based on the img, for exact positioning
$overlay.css({
top: position.top,
left: position.left,
position: 'absolute',
width: $img.width(),
height: $img.height()
});
// change the src attribute for the overlay
$overlay.attr('src', src);
// insert the overlay to the DOM
$overlay.insertAfter($img);
});
}
// when the DOM is loaded (not just ready, the images need to be there to copy their position and size)
$(window).load(function() {
// apply the overlay plugin to the wrapper of the images
$('#replace-images').overlayImages("http://www.riptideinnovations.com/images/watermark.png");
});
I added the step by step explanation inside the code as comments, but do feel free to ask if you want any further explanation.
I set up a small fiddle to demonstrate: http://jsfiddle.net/pP96f/6/

I don't know if this would help, but you could make your images all div's with backgrounds like this:
<div style="background-image: url('<your_image>');"></div>

Javascript Arranging Images as Pile of Cards

Im new to javascript so im sure there is a lot i am missing in its understanding.
What i am trying to do it create a layer of images so that it looks like a pile of cards.
have seen similar codes and have tried to follow their idea but i just cant get the images to position properly. All 10 or so images are place in the exact same location.
Can any help to see why they not positioning? Also what is "em". I cant find any literature on it but assume it is the measurement em like px ?? Why is it in "" ?
function Display() {
var el;
var left = 0;
var top = 0;
var i=0;
var n = deck.length;
var cardNode;
var img = document.createElement("IMG");
img.src = "wendell7_back.png";
el = document.getElementById('deck');
el.appendChild(img);
while (el.firstChild != null) el.removeChild(el.firstChild);
for (i = 0; i < Math.round(n / 5); i++)
{
cardNode = document.createElement("DIV");
cardNode.appendChild(img);
cardNode.style.left = left + "em";
cardNode.style.top = top + "em";
el.appendChild(cardNode);
left += 0.1;
top += 0.1;
}
}

"em" is the width of an "M" in whichever font is being used (or browser's default font if nothing overrides it).
There are at least two things wrong in your code:
left and top have no meaning unless the element to which they are applied also has position:absolute or position:relative (or position:fixed I think). Your safest approach is to apply position:relative (but no left: or top:) to the container and position:absolute to each of the cards.
There's only one img. For multiple cards, you need multiple imgs otherwise the same img gets repositioned over and over.
A more economical approach is probably to show a separate "stack" image for multiple cards and single card images for a single cards.
An even more economical approach is only to show single card images with a "tooltip" to indicate the number of cards in a stack. I have successfully employed this technique in an implementation of a game of patients.
Of course, these alternative techniques don't work if you want to show multiple cards as a "fanned out" stack of upturned cards.
Create a class and modify the position of that for the deck. Here is the working code:
function Display() {
var el;
var left = 0;
var top = 0;
var i=0;
var n = deck.length;
var cardNode;
el = document.getElementById('deck');
while (el.firstChild != null) el.removeChild(el.firstChild);
for (i = 0; i < Math.round(n / 5); i++)
{
cardNode = document.createElement("DIV");
cardNode.className = "card2";
var img = document.createElement("IMG");
img.src = "wendell7_back.png";
cardNode.appendChild(img);
cardNode.style.left = left + "em";
cardNode.style.top = top + "em";
el.appendChild(cardNode);
left += .1;
top -= 6.2;
}
}
Hope this will help.

There are a couple of problems with that code.
You're only using one img, and then you're appending it to each div you create. When you append an element to another element, if it's already in the DOM tree, you end up moving it. What you need is to create a separate img element for each card.
You haven't shown us your CSS, but unless you're using CSS to make all div elements under the #deck element absolutely or relatively positioned, the left and top style attributes will be ignored, as the div will be subject to normal flow.
Also what is "em". I cant find any literature on it but assume it is the measurement em like px ??
Yes, it's a term from typography. An "em" is the width of a capital letter M.
Why is it in "" ?
Because it's a string. You'd also have to have "px" in quotes. What you're doing with this code:
cardNode.style.left = left + "em";
...is using JavaScript to set a style property. Style properties are always strings, in this case you're creating strings like "0.1em" and "0.2em", etc.
Some reading:
DOM2 Core specification
DOM2 HTML specification
DOM3 Core specification
HTML5 specification
Various CSS specifications
A good book on JavaScript, I quite liked JavaScript: The Definitive Guide by David Flanagan
A good book on CSS and HTML authoring

My guess is that your offset is too small: if you replace the "em" with "px" for test's sake, and increase the left and top variables by 10 instead of 0.1, I bet you'll see some results.
To explain the em: 1em is equal to the current font-size of the element. If you haven't set the font size it uses the browser default. If you set the font-size to be e.g. 20px on the body tag, then 1em will equal 20px.

Make sure that your 'cards' have the css property 'position' set - either to 'absolute' or 'relative'.

javascript image overlay over a specified div

i am new at javascript. very new actually, this ought to be my first script.
can anyone explain to me how to make a transparent overlay over any specified fixed width region, say 700x300px.

You can define the overlay such as
<div id="myoverlay" class="myoverlay">...contents...</div>
and define the dimensions and position and z-index etc... in CSS
.myoverlay {
position: absolute;
display: none;
...
}
I don't quite see the need for JavaScript just yet, but I guess you will want to use JS to toggle the overlay's display attribute on/off.
<script type="text/javascript">
function showOverlay(){
document.getElementById("myoverlay").style.display = "block";
}
</script>
Is this roughly what you're after? Sorry for unintentional syntax mistakes, for this is untested code purely off the top of my head. Just to give you an idea.

You can create a div with transparency and absolutely position it over the specified region.
var shimDiv = document.createElement('div');
shimDiv.id = 'shim';
shimDiv.style.position = 'absolute';
shimDiv.style.top = 0;
shimDiv.style.left = 0;
shimDiv.style.width = "700px";
shimDiv.style.height = "300px";
shimDiv.style.backgroundColor = '#000';
shimDiv.style.zIndex = 3;
For non IE browsers set opacity:
shimDiv.style.opacity = '0.75';
As IE doesn't natively support transparency you should use the filter like this:
shimDiv.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=75)';
And add this new div to the end of the document body:
document.body.appendChild(shimDiv);
To support older IE versions you will have to put IFrame element under your transparent DIV.
To create IFrame dynamically from JavaScript try the following code:
var iframe = document.createElement('iframe');
iframe.setAttribute("src", "javascript:false");
Don't forget to set IFrame src attribute with useless 'javascript:false' statement to prevent IFrame from trying to load the page (which you won't notice it doing, but it will be the cause for tripping the "Unsecured Items" message if you use it on a HTTPS page).
Position this IFrame under the div by giving it a lower z-index property value.
iframe.style.zIndex = 2;
All the styling can be done with CSS. I just wanted to show how it done with JavaScript.