We Keep Coding

Get size of an unknown image and change class

On my Tumblr Theme I want to use a different CSS class for portrait images.
Images, by default, come in via img-tag and get's the class bilder. But if it's an portrait image, I would like to replace the builder class with the hhcoch class.
HTML:
<img src="{..}" />
JavaScript:
var someImg = $("img");
if (someImg.height() > someImg.width()){
$( "img" ).addClass( "hhoch" );
}
CSS:
.bilder {
height: auto; /*override the width below*/
min-width: 100%;
max-width: 100%;
display: inline;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.hhoch {
min-height: 800px;
max-height: 800px;
width: auto;
}
Sum up:
The image should get a different class if it's portrait.

You've got the right idea, however that specific jQuery selector you're using is going to return an array of ALL the image tags in your document.
This means you'll want to loop over the array of image DOM nodes and apply your class that way.
var $images = $('.bilder');
$images.each(function(index, img){
if(img.height > img.width){ // is it a portrait-image?
$(img).removeClass('bilder'); // Remove default class
$(img).addClass('hhoch'); // Add the portrait class
}
});

Have you tried condensing the solution to this:
$("img.bilder").each(function(){
if (this.height > this.width) {
$(this).removeClass("bilder").addClass("hhoch");
}
});
Because I don't think all those extra lines of code are needed and might be your problem. As others were saying, it will return an array of objects so you need to loop through them all.

How do I get the opposite results?

new to the scene of web developing/design
I've been trying to do this for a week now, but can't seem to figure it out so I was hoping I can get some help, it's basically a light switch
So what I'm trying to do is, when I click the switch the background changes colour, text and image changes as well and vice versa.
Umm here's my attempt, I can get it to change background colour and switch the image, but the text doesn't seem to be changing and I when I re-click it's not changing back to the original state
Here are the images:
http://oi59.tinypic.com/96xhec.jpg
http://oi62.tinypic.com/350ug5l.jpg
html:
<img class="swoff" src="img/switch_off.png">
<span class="msg">Hey, who turn off the lights?</span>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>') </script>
<script src="js/main.js"></script>
</body>
CSS:
body {
font-family:'Raleway', sans-serif;
font-size:1em;
text-align:center;
margin-top:31%;
background:#151515;
}
.swoff {
display:block;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width:200px;
height:200px;
}
.msg {
color:#fff;
}
.lighttxt {
color:#3c3c3c;
}
Javascript:
$('.swoff').on('click', function() {
var dark = "Hey, who turn off the lights?";
var light = "It's so bright in here!";
var swon = "img/switch_on.png";
if($('img').attr('src',swon)) {
$('body').css({'background-color':'#FFFFF2'});
$('msg').html(dark);
}
else {
$('img').attr(swon,'src')
$('body').css({'background-color':'#151515'});
$('msg').html(light);
}

I think it's easier to work with CSS classes and use the available jQuery methods (addClass,removeClass, etc).
In jQuery, inside element events, the shortcut $(this) refers to the element itself:
$('element').on('click', function(){ $(this).something(); });
Also, use # to target the ID of elements (#id) and . to target the class (.class), we omit this only for HTML tags (input, img, form, etc).
Runnable snippet:
$('#switch').on('click', function() {
var dark = "Hey, who turn off the lights?";
var light = "It's so bright in here!";
if( $(this).hasClass('swoff') ) {
$(this).removeClass('swoff').addClass('swon');
$('body').css({'background-color':'#FFFFF2'});
$('#msg').html(light).removeClass('darktext').addClass('lighttxt');
}
else {
$(this).removeClass('swon').addClass('swoff');
$('body').css({'background-color':'#151515'});
$('#msg').html(dark).removeClass('lighttxt').addClass('darktext');
}
});
body {
font-family:'Raleway', sans-serif;
font-size:1em;
text-align:center;
background:#151515;
}
#switch {
display:block;
margin: auto;
width:200px;
height:200px;
}
.swoff {
background-image: url('http://i.stack.imgur.com/I7Clv.png');
background-size: 100% 100%;
}
.swon {
background-image: url('http://i.stack.imgur.com/vbKrW.png');
background-size: 100% 100%;
}
.darktxt {
color:#fff;
}
.lighttxt {
color:#3c3c3c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="switch" class="swoff"></div>
<span id="msg" class="darktxt">Hey, who turn off the lights?</span>

I'm not sure what you had in mind with this line:
if($('img').attr('src',swon)) {
If you are trying to say "is the src attribute on the image the same as swon", then you want this:
if($('img').attr('src')==swon) {
Calling attr with one argument (i.e. .attr('src') ) gets the attribute, calling it with two (i.e. .attr('src',swon) ), sets it. So instead of checking if the src is equal to swon, you are instead setting it each time. This is the first reason it wasn't toggling. Your other line $('img').attr(swon,'src') is also whacky (wrong argument sequence).
There's more to fix but hopefully that helps.
NOTE: You're missing "});" at the end of the JS.

change height of div by clicking it

I want to change the height of the div by clicking it.
Why it doesn't work at the first clicking but the second?
I don't know why, but the height of the div is "" (in the second clicking is 20px because of the else condition)
If I define the height of the div in the html element (style="height: 20px"), it works.
<html>
<head>
<script>
function divOpen() {
var divHeight= document.getElementById("divBottom").style.height;
if (divHeight=="20px") {
document.getElementById("divBottom").style.height="200px";
}
else {
document.getElementById("divBottom").style.height="20px";
}
}
</script>
<style>
div{
border:solid 1px gray;
width:200px;
height:20px;
}
.divBottom {
position: fixed;
bottom: 0;
right: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="divBottom" id="divBottom" onclick="divOpen()"></div>
</body>
</html>
so I know how to fix it, but I don't know why the height is empty in the first clicking.
Please let me know..
any help appreciated!

In the initial click the height style property of your div is '' because you haven't set it.
There is a difference between setting height through the style property and by using a class. Try to refactor your code and make it use offsetHeight instead of style.height.
JavaScript
function divOpen() {
var divHeight= document.getElementById("divBottom").offsetHeight;
console.log(divHeight);
//22 because of the border
if (divHeight == 22) {
document.getElementById("divBottom").style.height="200px";
}
else {
document.getElementById("divBottom").style.height="20px";
}
}
DEMO

How to add flag in a web based exam?

I want to add a simple flag that changes its color when clicked (e.i. transparent flag changes to red when flagged) for the web based exam I'm working on. Could someone help or give me a script on this.

Have a picture of a transparent flag and a flagged flag side-by-side in one picture (for example, the transparent one at {0, 0} and the red one at {0, 22} assuming a size of 22x22 pixels) and switch between them with JavaScript and CSS:
(In the CSS file)
.flag {
background-image: url('flag.png');
display: inline-block;
height: 22px;
width: 22px;
}
.flag.active {
background-position: 0 22px;
}
(In the JavaScript file)
function toggleFlag(flag) {
if(/\bactive\b/.test(flag.className)) {
flag.className = flag.className.replace(/(^|\s)active(\s|$)/g, "");
} else {
flag.className = flag.className ? flag.className + ' active' : 'active';
}
}
Just call toggleFlag with the flag when it should be toggled.

The simplest way is to use two images. When it's clicked, you hide one image and show the other. Working demo here: http://jsfiddle.net/jfriend00/yzYJ3/
HTML:
<div id="container">
<img src="http://photos.smugmug.com/photos/344287800_YL8Ha-Ti.jpg">
<img src="http://photos.smugmug.com/photos/344284440_68L2K-Ti.jpg" style="display: none;">
</div>
CSS:
#container {position: relative; height: 66px; width: 100px;}
#container img {position: absolute; top:0; left:0}
JS (jQuery):
var flagged = false;
$("#container").click(function() {
$(this).find("img").toggle();
flagged = !flagged;
});

Have you looked at jQuery and the examples at jQueryUI - http://jqueryui.com/

How to show/hide a div from on mouseover/mouseout on a TR?

Is it possible to attach a popup (div) dynamically to a row in a table such that the popup is rendered by a mouseover, and hidden by a mouseout action?
The code I put together ( see below ) refuses to render the popups, albeit the event handlers are called.
Is what I'm trying to do really possible? From [mouseover() mouseout() jQuery add/removeClass problem, I'm guessing the problem is probably with the CSS
Thought's people?
EDIT:
The class attached to the selected div elements is updated as expected for both, mouseover and mouseout.
<link rel="stylesheet" type="text/css" href='mine.css' />
<html>
<head>
</head>
<body onload="doStuff();">
<table id="myTable">
<tr id="r1">
<td>R1C1</td>
<td>R1C2</td>
<td>R1C3</td>
</tr>
<tr id="r2">
<td>R2C1</td>
<td>R2C2</td>
<td>R2C3</td>
</tr>
<tr id="r3">
<td>R3C1</td>
<td>R3C2</td>
<td>R3C3</td>
</tr>
</table>
</body>
<script type="text/javascript">
function doStuff(){
var lRowCount = document.getElementById("myTable").rows.length;
for(lIter = 0; lIter < lRowCount; lIter += 1){
var lDynamicColumn = document.createElement("td");
var lmyDiv = document.createElement( "div" );
var lId = document.getElementById("myTable").rows[lIter].id;
// div content to be displayed as Text content;
var lText = document.createTextNode( "balderdash!" );
lmyDiv.id= lId + "_popup";
lmyDiv.style.display="none" ;
lmyDiv.appendChild( lText );
/*lDynamicColumn.appendChild(lmyDiv);
document.getElementById("myTable").rows[lIter].appendChild(lDynamicColumn);*/
document.getElementById("myTable").rows[lIter].appendChild(lmyDiv);
document.getElementById("myTable").rows[lIter].onmouseover = function(){
showPopup( lmyDiv.id );
}
document.getElementById("myTable").rows[lIter].onmouseout = function(){
hidePopup( lmyDiv.id );
};
}
alert(document.getElementById("myTable").innerHTML);
}
function showPopup( myId ){
document.getElementById(myId).className="show";
}
function hidePopup( myId ){
document.getElementById(myId).className="hide";
}
</script>
</html>
mine.css
.show{
background-color: #ffffc0;
overflow: auto;
z-index: 100;
border: .1em solid rgb(200, 128, 0);
float: right;
top: -10px;
margin: 5px;
height: inherit;
width: inherit;
position: absolute;
white-space: no-wrap;
}
.hide{
z-index: -1;
}

Add display: block to .show style. Also, your css selectors in the example are wrong, replace show with .show and hide with .hide (if that's not a typo).

On mouse over try document.getElementById('yourcontrolID').style['display']='none';
Hope this works.

I am not sure if this is the problem, but it could be that the lmyDiv is not accessible inside the inline function.
document.getElementById("myTable").rows[lIter].onmouseover = function(){
showPopup( lmyDiv.id );
}
EDIT:
I tested it, and setting the style class dynamically like this did not work in Firefox, IE, Chrome or Safari.
But it did actually work in Opera!
EDIT 2:
I was thinking about something else that could be the issue here:
When the tooltip is shown, is it positioned so that the mouse is inside the tooltip area? In that case, it might be that the onmouseout event on the row is triggered, because the row in question does not longer have "direct contact" with the mouse...
If this is the case, you should add:
lmyDiv.onmouseover = document.getElementById("myTable").rows[lIter].onmouseover;
lmyDiv.onmouseout = document.getElementById("myTable").rows[lIter].onmouseout;

function hide(obj)
{
document.getElementById(obj.id).style.display ='none';
}
onMouseover='hide(this) call this function on div u want to hide.

If you are willing to risk browser incompatibility (and I mean some fairly older browsers we would all like to forget yet always show up when they shouldn't), you should consider simply dropping the javascript all together and simply use pseudo-classes, like so:
.trMessage {
background-color: #ffffc0;
overflow: auto;
z-index: 100;
border: .1em solid #c88000;
float: right;
top: -10px;
margin: 5px;
height: inherit;
width: inherit;
position: absolute;
white-space: no-wrap;
display: none;
}
.trMessage:hover {
display: block;
}
Now you have the option of adding the div to each row in the actual html or keeping the javascript that adds the message box, but without the need for event handlers to adjust for style or class switching. You simply create the boxes the way you already do but use the class "messageBox" for each one. Then the css takes it from there.

Give a try at jQuery!