I am using the Pikachoose plugin for the image galleries on my website (http://www.clare-eileen-callahan.com/inthehangar/). Everything seems to be working except for the thumbnail carousel. They just pile up on the bottom of the page, where I want the carousel to be horizontally scrollable, so that only x amount of thumbnails are visible. I can't figure out what is going on with the CSS and Javascript that is preventing it from displaying as it should.
Here is the code I'm using: http://codepen.io/anon/pen/ybExq
Sorry there is a lot of it for the plug in!
For whatever reason, there was an unexpected element in the original jquery carousel script. I was able to find it by breaking apart the script into short lines and referring back to the console.
Related
In my flutter application, there is an image I would like to show that comes from another website. On that website, the image is actually a <canvas> element in HTML. I have seen resources about turning the Flutter Canvas into an image, or turning one's own <canvas> element into an image in JavaScript, but never anything about getting it from an external page.
The site I am trying to use is the NOAA Radar view. I could use a WebView to show the entire site but that seems needlessly heavy when I just need a still image.
What would be the best way about getting a still image from the site's <canvas> tag. I tried performing a http GET on the URL but there is no <canvas> tag present there when I do it in curl (via the html package). I believe this is because the canvas is rendered with JavaScript after the page loads.
I have an html file being served by Express, which also fetches data from an api. When I click a link in the navbar and switch routes (or the page is reloaded), the top navbar moves right, then left, and I can't figure out how to fix it.
If you look at the JSFiddle (link below), you'll notice that I have links to other pages, like /profile, /about, etc. Each time one of these pages loads, the navbar shifts (it's adjusting for the vertical scroll bar disappearing, then reappearing).
https://jsfiddle.net/h7bjyk63/5/
To mimic the api call, I added a setTimeout. To reproduce the issue and see what I'm talking about, you will probably need to run this code locally on your machine, and then refresh the page.
The strange thing is that this issue only occurs when there's some kind of delay (like an api call, or setTimeout). If I remove the delay and immediately load the content, everything works fine.
Some css code is commented out. The only key element I want to add later is position: fixed to fix the navbar to the top of the page.
How do I prevent the navbar from moving around?
The browser first renders the page without the scrollbar because it simply doesn't have to. Then you dynamically add few long paragraphs into the DOM, which makes the scrollbar to appear. This is what's causing your content 'shifting'.
The scrollbar is adding up to the width of your page. To prevent it from doing so, you need to do this:
html{
overflow-y: scroll;
}
I finally found something that worked, although I'm not 100% sure it's the correct way to do things. I just changed the width under the navbar--site-header class to 100vw instead of 100%.
DVN-Anakin's answer helped me understand the problem (and one possible solution), and this answer provided some additional good solutions.
I have created a website using Adobe Muse and have uploaded the site to the ftp server . The website is live and is as designed when looked via a desktop. But when the same site is being viewed from a mobile, the entire page is getting left aligned and there is a gap to the right side. I even made a phone layout and uploaded the same to the ftp server and the problem still persists. Ive googled a lot and inserted html code into the metadata to make the site centered but in vain. Nothing works . I have a tight deadline and would really be grateful for any quick help.
maybe your images are placed in pixels... If I am right
try using a rectangular tool... fill it with image then make the width 100%
to view the sample image click here
The size of mobile layout in muse is fix... I think the mobile you are using have different size... so just start using % on placing the images like the background etc.
There's a setting that was causing my content to be left-aligned in the phone layout.
Click Page > Page Properties
There's an un-marked button to the far right of Padding - click this and set it to centered. By default it is left-aligned.
My Facebook app (iframe / fluid / Fluid) shows a horizontal scrollbar. All attempts to remove it have failed.
I've tried all the solutions posted here, regarding FB.setAutoGrow(), FB.setSize(), etc... with no luck, but I found something interesting:
The scrollbars that appear are not related to my application, but related to the commercials at the side.
In the image you can see what I'm talking about:
To the left is a portion of my Iframe App. While the Iframe has been correctly resized (I've checked with Firebug - right) and their sizes are all right, there's that horizontal scrollbar at the bottom that affects the whole facebook window (not just my iframe).
The highlighted item on Firebug is what causes the horizontal scrollbar. They don't belong to the pagelet div (the div where the iframe resides): It's part of the carousel of recommended games to the right ! (and its width is > 5000 pixels).
When I first launch my app, there are no scrollbars fora little time interval, like 500ms, then they suddenly appear.
FB.Canvas.setSize , FB.Canvas.setAutoGrow seem to work, if I invoke them manually, they do resize the iframe, etc. but they don't remove the scrollbar.
I have body:overflow=hidden.
(may be related?) My app uses itself another iframe, width and height 100%, that is where the action takes place. That other iframe also has overflow=hidden.
This has traditionally worked. I stopped paying attention to Facebook for a couple months, then I saw this yesterday :(
What can be happening? My guess is somehow Facebook thinks my app needs horizontal scrolling, removes overflow-x:hidden in the main body in order to allow it, but this intererferes with their carousel that expects a hidden overflow... I don't know if this problem is at all my fault or a Facebook Bug.
Fortunately, this bug has been solved by Facebook. Everything is working now.
I am working on a site and the header element is completely disappearing in only IE7 (it shows in IE6 and IE8). It shows for a second, then once the whole page is loaded, it disappears. I have no idea what could be causing this. The portion disappearing is the section I have included via PHP, but it still doesn't show when I actually insert it into the file, so I don't think that is the problem. Any help would be appreciated. I can post any code that would be helpful, but most of it should be able to be found through the view source or inspecting an element.
On a side note, my opacities aren't working in any version of IE either. I have them in a separate IE CSS document and am using the filters, so I am not sure why it is not working.
I figured it out. Apparently IE7 doesn't like negative z-index values and so was placing my background image over certain elements on the page that were above it in the HTML. Strange, but that's IE for you I guess.