Develop Reference

White Space occur only in mobile view because of scroll up icon

I am creating a website using a free template Click here to go on the website
When you scroll up after scroll down you will notice a red standing arrow at the bottom right corner this is an image of the red arrow on which if you hit it will scroll the page to top #Home.
Now the problem is on my laptop it looks ok but when I do inspect to see mobile view then I can notice a white space created by this feature.
this is the image :
Click here to see image
I already tried using :
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
and notice that only overflow-x: hidden remove white space but also affect then arrow scroll functionality and also still little bit space persist towards right size with a bottom scrollbar.
I tried to remove the entire scroll code also but still unable to remove this white space which is occurring only in mobile view.
I gave a link to the entire website instead of mentioning here as I don't know which code is causing a problem and can't provide a code of entire website at here.
Please see the link and over there you will find the entire website with this scrolling feature on each page. Thanks

The image used as the background of your #toTop element is 32px wide, so change the width:
#toTop {
width: 32px;
}
If you need to push it away from the right hand side, use a margin-right.

Transparent div overlaping Google's logo on Google maps

On my website's homepage there's a big picture which take 100% of the width and 60% of the height (it's a div with a css background-picture not an tag).
Over this picture, there's is a black transparent div (mainFormContainer) with some form input.
Two of those inputs are address field which are bind to Google Place autocomplete.
Here is the HTML code
<div id="titleContainer" class="splash-container" style="position: relative;" >
<div id="mapContainer" style="width: 100%; position: absolute;top: 0;"></div>
<div id="mainFormContainer" class="splash-bottom">
<form></form>
</div>
</div>
Basically what I did is that when an address is filled by clicking on an autocomplete suggestion (event place_changed in javascript) I initialize & display the google map with a marker on the location.
It works fine and looks great but the problem is that the mainFormContainer is over the Google logo of the google Maps (bottom left corner) and over the map's data (bottom right corner).
Since the div is transparent background-color: rgba(0, 0, 0, 0.6); the bottom data is not hidden and I used this solution (Responding to links under an overlay div) to make the below link clickable.
However, because my div is not transparent, this data is less visible and I'm not sure if it'll be a problem.
I would like to know if there is a solution to add some padding to the google logo & the bottom right data of the map ?
I've seen that you can do it on ios (https://developers.google.com/maps/documentation/ios/map#map_padding) but I didn't found anything equivalent for the javascript API
The only solution I could find was to add some invisible div as map controls to add padding but it doesn't work on the bottom data.
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(createDummyDiv('100%', '20%'));
But since it add a div in the google maps, I tried the following code :
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(cloneSearchBar());
function cloneSearchBar()
{
var clone = $('#mainFormContainer').clone(true);
clone.css('width', '100%');
clone.css('height', $('#mainFormContainer').height());
console.log(clone[0]);
return clone[0];
}
This trick gave me numerous new problem :
The Google Place autocomplete doesn't work (Autocomplete suggestion doesn't show at all)
The design for the font are herited from the maps and not my CSS
I have a field input with a datepicker that doesn't work as expected. The datepicker appear but when I click on a date, it doesn't fill the input.
So I gave up on this solution.

These elements have a common property, they are placed via CSS at: bottom: 0px;
You may use this to create a selector:
#mapContainer div[style*="bottom: 0px"]
to apply the padding you may use a transparent border at the bottom:
#mapContainer div[style*="bottom: 0px"]{
border-bottom:50px solid rgba(0,0,0,0);
}
Demo: http://jsfiddle.net/doktormolle/m2rumozm/
But I'm not sure if it's a good approach(the API may change), you better try your final attempt(use the form as map-control). The issues #1 + #3 probably may be fixed when you add the original #mainFormContainer instead of a clone(at least an autocomplete works without problems as a control, I've added an autocomplete to the fiddle to demonstrate it). Issue #2 should be solvable via CSS.

Interactive HTML webpage

EDIT: Thanks for a lot of great examples on how to solve these. I cant decide between who to accept yet, but I will go though all examples and see which I like the most. Great feedback guys! =D
I normally do these kind of things in flash, but this time it has to be compatible with mac, iPads and all those units too.
So, what do I need help with?
I've got a picture, with some "hotspots" on. I want to be able to click any of those hotspots to show some information.
This should be fairly basic and easy to achieve, but since I've never done this in html before I have to ask you guys =)
So, what would be the best way to do this? It have to be compatible with any browser and device, and it doesnt need to be very advanced. If it's possible to add effects to the box (sliding out, fading in, or anything like that) then thats a nice bonus, but not something I need.
Any help would be great!
BREAKDOWN:
I have a background image with some "hotspots" (numbers 1 and 2 in my example). The users should be able to either hover the mouse over any of these or click it to get more information, as seen in picture #2
This is that happens when you hover/click any of these hotspots.
Text and image is displayed inside a nice little info box.
If the user clicks "more information" it will open up even further to display more information if available. Like in this img:

I don't think the Javascript approach is really necessary here. I created a little CSS-only mock-up for you on JSBin.
Basically the point is that you enclose the image in a relatively positioned div, then absolute position the hotspots inside the same div. Inside the hotspots divs you will have the more info elements, showing only on :hover of their parents.
This makes it simple, and far more accessible.
Update: cropping the image equally from both sides
If you want to keep the image centered and still not use any javascript, you could set the required image as a background-image of the container, and setting its background-position parameters to center center.
You would have to make sure that the width of this div is set to the width of your image, and the max-width to 100%, so that when the window gets resized below the image width it stays at the center.
Now, a problem that I encountered here is how to make the hotspots stay center relatively to the image. I solved it this way:
I created a wrapper div for the hotspots with these characteristics:
margin: 0 auto;
position: relative;
width: 0px;
This basically makes sure that the wrapper div finds the center of our image. Then, you would position the hotspots relatively to the top-center position of the image, instead of the top-left as a starting point.
Then you have what you are looking for.
Working demo

Here's another approach, and in my opinion far superior to using a map or excessive JS. Place <div> elements on top of the element with the background-image and have HTML and CSS do the heavy lifting for you.
See it on JSFiddle
HTML
The HTML should seem pretty each enough to understand, we create <div>s with the class hotspot and rely on certain things being present. Namely .text (to show digit), .hover-popup (to show on hover) and .click-popup (which is inside .hover-popup and is shown when clicked).
<div id="hotspot1" class="hotspot">
<div class="text">1</div>
<div class="hover-popup">
I was hovered!
<div class="click-popup">
I was clicked on!
</div>
</div>
</div>
<div id="hotspot2" class="hotspot">
<div class="text">2</div>
<div class="hover-popup">
I was hovered!
<div class="click-popup">
I was clicked on!
</div>
</div>
</div>
CSS
This is where most of the magic happens, see the comments for further explanation.
/* These two position each hotspot */
#hotspot1 {
left:15%; /* we could use px or position right or bottom also */
top:20%;
}
#hotspot2 {
left:35%;
top:25%;
}
/* General styles on the hotspot */
.hotspot {
border-radius:50%;
width:40px;
height:40px;
line-height:40px;
text-align:center;
background-color:#CCC;
position:absolute;
}
.hotspot .text {
width:40px;
height:40px;
}
/* Show the pointer on hover to signify a click event */
.hotspot .text:hover {
cursor:pointer;
}
/* hide them by default and bring them to the front */
.hover-popup,
.click-popup {
display:none;
z-index:1;
}
/* show when clicked */
.hotspot.clicked .click-popup {
display:block;
}
/* show and position when clicked */
.hotspot:hover .hover-popup {
display:block;
position:absolute;
left:100%;
top:0;
width:300px;
background-color:#BBB;
border:1px solid #000;
}
JavaScript (with jQuery)
Unfortunately you're going to have to use some JavaScript for the clicking part as CSS doesn't have a 'clicked' state (outside of hacks with checkboxes). I'm using jQuery because it's dead easy to do what I want.
$(document).ready(function () {
$('.hotspot').click(function () {
$(this).toggleClass('clicked');
});
});
Creating the arrow
Over at css-tricks you can find a tutorial for attaching an arrow to a element using the :before and/or :after pseudo-elements. You can even 'simulate' a border around them by placing the :after element on top of the :before. But yea, lots of resources on how to do this.

You should be able to use the onclick or OnMouseOver event in the map area (define the href as "").
An example using OnMouseOver is here: http://www.omegagrafix.com/mouseover/mousimap.html

Give a class for that image in html (Ex: imgclass). And in javascript(using jquery), build that hover box in html format and bind it to 'mouseover' event of that image.
For example:
function bindhtmltoimage() {
myimg = $('body').find('.imgclass');
divSlot.each(function (index) {
$(this).bind('mouseover', function () {
try {
//position the hover box on image. you can customize the y and x axis to place it left or right.
var x = $(this).offset().left;
var y = $(this).offset().top;
var position = $(window).height() - ($("#divHover").height() + y);
var widthposition = $(window).width() - ($("#divHover").width() + x);
if (position < 0 || widthposition < 0) {
if (position < 0) {
$("#divHover").css({
position: 'absolute',
left: x + 20,
top: y - $("#divHover").height() - 20
});
}
if (widthposition < 0) {
$("#divHover").css({
position: 'absolute',
left: x - $("#divHover").width(),
top: y + 20
});
}
}
//build your html string for that hover box and apply to it.
$('#divHover').html("your Html content for that box goes here");
$('#divHover').show();
//if you want the box dynamically generated. create the html content and append to the dom.
}
catch (e) {
alert(e)
}
});
});
}
it will work fine in desktop and mobile. if you face any problem in touch devices, bind the function to click event instead of 'mouseover'.
Also, for map approach, i strongly recommend SVG instead of images.

Get rid of useless scroll bars on fancybox iframe

I have some content I want to show in iframe with fancybox. When I use it, it pops up with horizontal and vertical scroll bars even though all the content is inside of it. Inspecting it in Firefox shows that when I click on html everything is inside but there is a little left over that is outside of the highlighted box. The next level up is iframe.fancybox-iframe which includes the scroll bars. I looked at the css and that has padding and margins set to zero so I don't know why the scroll bars are there. Right now as far as options I just have autoSize:false. All I have inside the body of the page I want to show is a form.

If anyone wonders which class name to use
.fancybox-inner {
overflow: hidden !important;
}
And if you found a small white background you can reset it using
.fancybox-skin {
background: inherit;
}

Try adding this to the css:
.style{
overflow: hidden;
}
If it didn't help, please post your HTML and CSS.

CSS or jQuery problem: Website not behaving correctly

Go to this beta of my new website (link redacted). If you hover over one of the colored squares, a popup box à la Panic's Coda pops up, except there are two problems:
a) The text inside the popup does not show up. It is programmatically set to :) using the following code:
http://grab.by/syM http://grab.by/syM
$('td.middle', this).text(':)');
     td.middle is the class of the middle cell
     this is a reference to $('.info').each()
Use may want to use an inspector tool like Firebug for Firefox or the one included one in Safari or Google Chrome.
b) The sides are clipped off:
http://grab.by/syE http://grab.by/syE
I think it is due to this:
http://grab.by/syW http://grab.by/syW
For some reason, the sides have computed widths of 1px, as opposed to
.bubbleInfo .popup td.corner {
position: inherit;
height: 15px;
width: 19px;
}
19px as defined in (link redacted)
You can grab a ZIP archive of all the files here (link redacted).
Thanks so much. I know this is a lot to ask.

The width of the container div for the :) table is clipping the sides of the :) table popup. If you edit the width of the .info class up from 32 to something bigger (I did width:80px) you see the whole popup. Alternately, you can change the width (or min-width) of .popup to about 50px, which fixes them without distorting the size of the colored boxes.
As for the :) being missing, I was able to make it appear by setting text-indent:0 in the .middle class. This had no ill effects on FireFox and fixed it in Chrome.