After clicking a link to a section further down the page, scrolling back up is prevented. The browser just stops at the anchor location. I have to erase the #[anchorid] bit from the end of the URL and refresh to get back to the top of the page.
Pretty weird (and aggravating). It also prevents my "back to top" links from working for some reason. I tested it in the latest version of Chrome and Firefox--it does the same with both. I'm only using HTML & CSS, no jQuery or anything. From what I can tell, I've coded it correctly. However, I'm a n00b and I may be missing something obvious. Any help is appreciated!
The section is identified like this:
<h4 id="work">Recent Work</h4>
The link is constructed like this:
Recent Work
The site is www.autumnfaulkner.com if you want to look at all the code.
In FireFox's Firebug, I removed the margin and padding entries from the style below and it seemed to work:
.holder .even-height {
float: left;
margin-bottom: -10000px;
padding-bottom: 10000px;
}
Related
On mobile (or desktop with small window size to replicate mobile, as per the screenshots) the form on my page loads fine with default dates, but when a new date range is selected the form shifts to the left after making the selection (or rather, a gap is inserted to the right) but I can't find anything using F12 developer tools that is causing it. It is not possible to scroll to the left.
On page load:
After selecting dates:
The form itself is displayed by embedding a third party JavaScript link on the page - is there anything I can do to prevent this from happening? I can't figure it out!
Note: The page uses a YouTube video background which is blocked by the firewall where I am working from at the moment (hence the grey background), but is not causing any JavaScript errors. The problem is the same on all mobiles and on networks where the background is able to load.
Live example at #########.com (address will be removed when resolved)
Thanks
UPDATE: As per the answer from Wouter, removing the overflow: hidden from <section class="gg-section hero video-home" id="dots-section1"> fixes the issue, but unfortunately that causes other layout problems so cannot be applied.
The problem is likely to be caused by the video being 300% width. Try to set a overflow: hidden; to the following element:
<div class="video-background">
May not help but..
I had a similar issue with page jumping and forms before.
It was caused by an <input class="hiddencheckbox" type="checkbox" />.
Every time I used js select/deselect the checkbox, the browser would try and jump to the checkbox position, which I had hidden by moving its position outside the viewport.
.hiddencheckbox {
position:fixed;
right: -1000px;
// BAD WITH JS
}
I removed the positioning and changed it to:
.hiddencheckbox {
display:none;
}
I'm building a Wordpress website by customizing and editing an existing theme called 'onetone'. It's an one-pager theme. The problem I'm having is that neither the homepage (the one-pager landing page) nor the individual posts/pages will extend to full height.
Under the footer, there's a thin black line 23 pixels in height, that extends 100% of the width.
Here's the quirky thing: while I'm logged into the site as an admin, the line disappears. When I'm visiting as an unlogged, regular user the line is there. All major browsers (FF, Opera, IE, Chrome). Also, on my sister's computer with FF installed the line didn't show even when unlogged.
I've searched StackOverflow, and the usual answer to have <body> and <html> set to height:100%; (including min-height:100%;) isn't working. I've also added height/min-height to containers and wrappers to test the setting. (Not all, though, only the ones I thought were relevant to the issue I was trying to solve) I've also tried the margin: 0; & padding: 0;, but NOTHING works.
I suspected it's the footer's fault, but using the inspect element function in my browser (and some further tests) I found the footer has nothing to do with it.
In the original, untouched theme, the line doesn't appear. So it must be some of my edits causing it, though even by comparing the original and my edited CSS file line by line, I couldn't find something that should've caused this error. And the CSS is the only thing I've edited.
I'm not a coding expert, and I've about exhausted my wits and available knowledge trying to figure this out. Does anyone have any idea what may be causing this glitch?
This is my site. The glitch is best seen on posts / pages. If any specific code samples are needed, just say and I'll post them.
Your code has this weird image just before the <body> tag ends, after all javascript calls:
<img src="http://pixel.wp.com/g.gif?v=ext&j=1%3A3.4.1&blog=50532064&post=651&tz=1&host=firstinkstudios.com&ref=http%3A%2F%2Ffirstinkstudios.com%2F&rand=0.7281985701993108" id="wpstats">
Remove it and you're golden
There's a background color on body. Getting rid of that fixes the "border".
body.custom-background {
background-color: #000000;
}
Also there's a smiley on the bottom
It looks like this
<img src="http://pixel.wp.com/g.gif?v=ext&j=1%3A3.4.1&blog=50532064&post=444&tz=1&host=firstinkstudios.com&ref=http%3A%2F%2Ffirstinkstudios.com%2Fblog%2F&rand=0.1907386933453381" id="wpstats" scale="0">
I'm new to html, and the top image in this site seems to come from nowhere. By inspecting the source I find an with a link to the home page and a <span>Fragments of light</span> but there is no img. What am I missing? Thanks!
The parent div #title has the image as a background image.
<style type="text/css">
#title {
background: url(http://colleenbriggs.files.wordpress.com/2012/12/cropped-fragments-of-light-low-res.jpg) no-repeat;
height: 180px;
}
</style>
The image is in css.
#title {
background: url("https://colleenbriggs.files.wordpress.com/2012/12/cropped-fragments-of-light-low-res.jpg") no-repeat scroll 0 0 transparent;
height: 180px;
}
I would recommend you to use FireBug plugin for Firefox or Developer Tools for chrome for finding out what you need about the markup on the page. Even IE has developer tool for that.
To use such tool you just need to hover the element on the page that you need, right click on it and select "Inspect Element" in the context menu. After that the FireBug/Developer Tools will appear at the bottom side of the browser and there on the left you will see all markup which is rendered right now and the element that you are inspecting will be selected. On the right you will be able to see all css and other properties of selected element. In these css you will see the backgroud image url. You will be able to change something there and immediately see the result of change on the page.
Using such tool is much easier and better than just inspecting the source code because the HTML can be changed after page load by javascript and you will not see these changes in the source code of the page but you will be able to see everything in the Firebug/Developer tools.
Check them out. They are Number 1 tools for Web Developer.
And I agree with previous answers. The image is on the backgroud in css. You just need to know the way to see it by yourself. Not just know from internet =).
I am making a HTML/CSS and jQuery-based file manager aimed at mobile devices. Part of it involves the use of CSS=based modal dialog boxes for various file operations (copy, delete etc.).
I achieve the modal dialog behaviour like this:
<div id="overlay">
<div id="modalBoxControls">[close]</div>
<div id="modalBox">
<div id="modalBoxContent"></div>
</div>
</div>
And the CSS is:
#overlay {
position: fixed;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
background: ([semi-transparent png]);
display: none;
}
#modalBox {
width: 80%;
background-color: #fff;
margin: 0px auto;
opacity: 1;
}
I use jQuery to show and hide it by calling .fadeIn() and .fadeOut() on the overlay element.
So far so good - this works great in all the browsers on my dev machine.
However, when testing on my WP7 (Samsung Omnia 7), a rather bizarre thing happens. The modal dialog shows up fine, the page behind it is blacked out. But clicks (or taps) go through the #overlay and activate anything behind it, even though it totally covers up everything behind and it's z-index is 1000.
I also tested this with the well-known "Lightview" plugin from Nick Stakenburg (a well-tested and refined piece of code) and found the same behaviour on IE on WP7.
So it seems like this could be a bug with the browser itself.
Does anyone know any solution for this?
Edit - jsFiddle with example of problem
So, check this out in your WP7 device and see how the files can still be clicked even when there is an overlay over the top of them: http://jsfiddle.net/michaelbromley/CHU76/
If by "activate anything behind it" means input controls like text input then I had the same issue. To be honesty I don't know a good solution. My workaround was disabling input controls during popup is showed and then activating them back by removing disabled attribute. The problem seems not to be related to jqmobile, but supposed to be a general behavior.
OK, so it seems that there may be no "proper" solution to this problem (hey, 24 hours is a long time on SO!), so I have come up with my own hack solution:
I when the modal dialog box is opened, I simultaneously set the "visibility" CSS property of all the elements "behind" the overlay (i.e. links and anything else that would otherwise erroneously respond to taps/clicks) to "hidden" (by using jQuery's .css() function). This means that the page layout is not affected, and that there is now nothing there to be clicked on.
As I said, this is a bit of a hack and will not be suitable for everyone who runs into this problem. However, it works well for me.
Code in jsFiddle: http://jsfiddle.net/michaelbromley/CHU76/1/
Yes, this is clearly a bug in Window Phone 7 and it is not even fixed in Windows Phone 10.
I will report this bug to Microsoft and hopefully it will be fixed.
I'm working on my new online portfolio at http://asbjorn.org/ny/, and I've come across the weirdest issue!
Every time you open the page for the first time, the next and previous buttons for the slideshow don't appear. If I open the inspector, they pop up immediately, and they also appear when reloading the page.
They're pretty standard html elements, not added dynamically, so I have NO clue as to why this happens! Of course I can't have the site visitors reload the page just to see them. :/
I really hope someone can help me! :)
update: seems like it's a chrome only issue. For me it happens consistently in chrome on both Win7 and OSX. A few of my friends also has the same issue (probably in chrome on osx)
So I'll take a stab at an answer. When I see the problem in Chrome 22, and I bring up the inspector, I note that the #previousLink and #nextLink divs have a width of 0 in the broken state. Try setting an explicit width for these in your CSS, or make the nested image use display: block.
#previousLink { width: 31px; }
#nextLink { width: 37px; }
or
#previousLink img,
#nextLink img { display: block; }
I think the combination of these inline items and your overflow: hidden rule are biting you. I think. This is a tricky bug!