We Keep Coding

Responsive Image Map-Plugin does not work

I have some problems to create responsive image maps with Matt Stows jQuery Plugin. I followed all the advices, but the image maps are still not responsive. I hope you can help. These are the instructions (Full page: https://github.com/stowball/jQuery-rwdImageMaps):
If possible, add correct, unitless width and height attributes to your image map images. You can override these in CSS to make them responsive.
Add a link to jQuery in your page, preferably at the bottom just
before the closing </body>
After jQuery, either in a block or a separate file, call:
$('img[usemap]').rwdImageMaps();
That's my code, I set a fixed width and height which is overwritten in CSS.
<div class="banners">
<img src="wcf/images/blueTemptation/logo2.jpg" style="width: 980px; height: 80px; display:block;" alt="banner-x" usemap="#banner-y" />
<map name="banner-y"><area shape="rect" coords="560,1,765,79" href="http://www.filmfutter.com/" alt="Kgergrfr" title="Filmfutter Startseite">
</div>
at the bottom of my php I placed this:
<script src="https://raw.github.com/stowball/jQuery-rwdImageMaps/master/jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script>
In case you wonder, I changed the script source to a URL because I wasn't sure about the right path on my server, but that should not be the issue.

So, I did not manage the plugin to get working and I still wonder because obviously I did nothing wrong, but I used another plugin instead, and finally it works properly. In case some others have the same issues, David Bradshaw's library does exactly what I want and resizes image maps the way they should: https://github.com/davidjbradshaw/imagemap-resizer

I had the same issue, it turns out that I was using JQuery v1.8.3, when I updated it to JQuery v1.9, that seemed to do the trick.
Maybe it's a JQuery versioning problem?

Image disappears only in firefox

I am trying to have an image become slightly opaque when the mouse hovers over it. I use this line of code in php.
<img src="/wp-content/themes/Map/images/SlideTab/slide2.png" onmouseover= 'shade(this)' onmouseout = 'normal(this)' onclick='showSubMenu("sm_item3")' alt ="Slide" style ="height :22em ; width:4.063em; "/>
The shade function just changes the opacity to 0.5 .The image acts appropiately in all browsers except firefox. In firefox the images goes opaque and if the mouse stays over the image, the image will disappear. I have been unable to locate the issue. Thanks in advance for any advise.
here is my shade function. Very simple. It works in all browsers. It even works with firefox. The difference is in firefox after going opaque the image goes away completely:
function shade(x) {
x.style.opacity = ".5";
}

You should rely on a lib like JQuery and its API. Look at fadeTo method for instance. If you still want to use your own method, please paste it in the question.
Cheers.

Enabling browser scroll bars after window.open with scrollbars=no

I have an existing link which opens up a webpage in a new window with scrollbars disabled as follows:
<a onclick='window.open("example.html", "name", "resizable=1,scrollbars=no,width=500,height=200");' href='#'>Click to pop up without scroll bars</a>
For the sake of argument, I cannot change this window.open() code. I need to enable scroll bars after the window has been opened.
This works in IE using the following code:
<script type="text/javascript">
onload=function()
{
enableScrolling();
}
function enableScrolling()
{
document.body.scroll = "yes"; // IE
}
</script>
However this does not work in FireFox or Chrome.
According to this page, the following code should work for FireFox and Chrome but it does not (perhaps this worked in earlier versions?)
document.documentElement.style.overflow='scroll';
document.body.style.overflow='scroll';
Does anyone know if it is possible to enable scroll bars in FireFox and Chrome after the window has been opened with scrollbars disabled?

Just like Nikunj Soni said, setting a height attribute to your body tag will help you solve the problem in every browser. What I will do differently is the following:
Instead of setting a fixed height, I would set height:100%, which enable you to open the popup also in different sizes than the original.
<body style="overflow:auto; height:100%;">
The rest of your HTML code
</body>
This is also not the best solution, but you are actually removing the restictions you get from the link.
Hope you find this answer helpful.

Since you add js for IE I assume you can change the way displayed page works.
In that case I would try to put the contents of the opened window in div, and set its style to something like: height: 200px; overflow: auto;

Actually I tried with different browser, If you have fixed requirement about height, what you can do is wrap all the content of example.html in a specific div with the attached css like overflow:auto;height:200px. I will show you the whole code.
<body>
<div style="overflow:auto;height:200px;">
Your HTML code
</div>
</body>
put it into example.html. Height you can get from your code window.open("example.html", "name", "resizable=1,scrollbars=no,width=500,height=200");.
This is not the the actual solution but it will solve your problem in every browser.
Hope this help.

Browsers reformat my HTML which results in different look

EDIT: I found that the issue is actually that IE changes an HTML elements class text from:
"<img class="blah".." to "<img class=blah..".
This is only happening in IE for me. Note it doesn't remove the src quotation marks or the id quotation marks or others. This is sooo frustrating!
I am using JQuery to update a website visually, Inside my main div(updatableDiv) I change each updatable HTML element(for eg an p, i, b, etc.) into a textarea. The user makes their textual changes then I change the textareas back to a p, b etc. This is all done using JQuery.
My Problem: When I go to get the HTML from the div(with the id updatableDiv), my HTML is slightly different which results in the display of the HTML being slightly different. For example: if I have an image thats sits directly above a white box(not vertical gap in between), after I update the html, there is a vertical gap introduced in between the image & the white box.
So the before html was(this is an example from IE):
<img class="pageHeading" src="linksHeading.png" width="90%" alt=""/><div class="pageContent">
After getting the HTML using the call $("#updatableDiv").html() the html looks like this:
<IMG class=pageHeading alt="" src="linksHeading.png" width="90%">
<DIV class=pageContent>
So it results in a vertical gap.
So my main question is how can I keep all the formatting of the HTML so problems like this dont occur after I update the HTML & get the HTML from the element by JQuery's $("#updatableDiv").html()?

Make the img display: block.

When you get the innerHTML in some versions of IE, it will NOT give you back your original HTML. It will give you a generated version of the HTML that can be quite different from the original (though semantically identical to it).
I've seen some versions of IE:
Remove quote marks around attributes
Change the order of attributes
Change the case of attribute names
So, in a nutshell, all you can count on when you get the innerHTML of something in IE is that it will give you semantically the same HTML, but it may not be the same HTML as what was in the page originally. It appears that it doesn't save the original HTML, but instead generates it from the object attributes. Since there are many legal ways to express a given set of attributes, IE will not necessarily generate it the same way you originally specified it.
I don't believe there is anything you can do about this unless you want to reformat the generated HTML that IE gives you according to your own style rules (add quotes where you want them, put attributes in a specific order, change to a specific case, etc...).
If you run this jsFiddle in IE7, you will see it change all three items above from what was originally specified.
I specify this HTML in IE7:
<div id="test" data-item="test" style="background-color: red; height: 40px; width: 100px;">
When I request innerHTML, I get this back (different order, caps and quoting):
<DIV style="BACKGROUND-COLOR: red; WIDTH: 100px; HEIGHT: 40px" id=test data-item="test"></DIV>
I'd actually be surprised if the vertical gap you notice is because of the changed HTML. IE is notorious for putting extra space around images. For one, they are an inline item by default so it treats them as being part of a line and gives the line they are on the prevailing line height. This can add extra space around images in various ways. The work-arounds I've used in IE are to make the image display: block (if that's appropriate) or to set font-size: 0 on the container that the image is in so IE doesn't give the line any additional height. You should also make sure that you've specified a border for the image because older versions of IE like to give images a default border too.
This extra spacing around an image can be triggered by the existence of a space in a line that didn't previously exist. Other browsers consider that space only as a separator, but in older versions of IE, it triggers some extra line spacing.

White-space in the source shouldn't matter. You're not losing (or adding) some CSS class information during the transition are you?
img elements are inline by default, so normally they line up to the text baseline leaving a gap that is the extra space below the baseline for dangling letters like lowercase g. Block elements should line up with the bottom of the containing block.
Try setting some CSS:
img { display:block; }
// or possibly
img { vertical-align:bottom; }

Automatically vertically scroll div contents looping

I am trying to find a simple way to have a div with just text in it automatically scroll the text vertically. I don't want to use a framework (though I do use Prototype, so if it is easier using Prototype then that is fine, but no Scriptalicious).
I assume there has got to be a way to do this with a few lines of code, but I am not familiar enough with Javascript to know how to most effectively do that.

This might not be conventional but you can try the <marquee> tag
it works both in IE and FF, and the last time I checked, safari too.
<marquee behavior="scroll" direction="up" height="250"
scrollamount="2" scrolldelay="10"">
Your content goes here
</marquee>
should give you what you want,
and you can style them like any <div>...
and then there is the added advantage of having no javascript...
Edit in response to your comment
It gets better, try this in any browser
onmouseover="this.stop()" onmouseout="this.start()"
And this in IE
style="filter:progid:DXImageTransform.Microsoft.Alpha( Opacity=0,
FinishOpacity=100,
Style=1, StartX=0, FinishX=0, StartY=0, FinishY=10)
progid:DXImageTransform.Microsoft.Alpha( Opacity=100, FinishOpacity=0,
Style=1, StartX=0, FinishX=0, StartY=90, FinishY=100)"
As attributes of the marquee tag...

function scrollDivUp(id){
document.getElementById(id).scrollTop-=1
timerUp=setTimeout("scrollDivUp('"+id+"')",10)
}
try something like that maybe.
you could also change the .scrollTop-=1 to .scrollTop+=1 to scroll the other way.
You would also need a scrollable div which can be done by constraining the size and setting the overflow style property ie. style="width:200px; height:300px; overflow:auto"

Try changing the div's scrollTop. There is an example here.

I see that the correct answer isn't given yet. I think you have to look at cloneNode() for instance. And clone the element you want to scroll. When the first element is at the last point of scrolling then place the duplicated element after the first element. And when that duplicated element is almost at the end, place the original after the duplicate and so on!