Up until recently, this site functioned fine when translated in Google. Now, when translating a page, links don't work/are changed, styles are ignored or overridden, the menu no longer works, scripts seem crippled and in general it's a mess, with no apparent (to me) logical explanation.
http://stage.ladottransit.com/index_gt.html
Click translate and choose any language.
In the translated page, if you click the menu button, and then click one of the list items, it should expand a submenu. It does not. Initially I had heard that using a hash link can cause this (using JQuery for the nav, amongst other things, and this requires the list headers to link to #), so I changed those to javascript:;, to no avail.
Lazy loaded images never show up, even though inspecting the styles says they are displayed and at full opacity. As they are in a carousel, they are floated left and overflow:hidden. They also lay over the top of the page content so that none of it is clickable. I need to get this back to a state where it functions reasonably in other languages as soon as possible.
My JS skills are pretty remedial, so if this comes down to a script conflict with something at Google, the odds that I will be able to suss it on my own are not great. Any direction would be greatly appreciated.
Related
I've been testing out the flipcards included in Canvas, the HTML templates resource, and now I want to implement them in an actual, pre-existing website.
On my test page, the cards were in the middle of the screen, their height could be changed with a data-height-xl attribute in the HTML, that also appears in the JavaScript that runs the page, and even reorganized themselves if one of the cards was too long. Example here (I removed the pictures and the text, but the cards are working)
However, in the website I want to add this in, the cards are stretched to the sides of the page, and all have the same height (because of that, I don't even know if they still reorganize themselves). I tried comparing and making changes to the JS/CSS code that was already on the website (which also uses Canvas templates) with what I used for my tests, but I haven't been able to get much further. I feel the stretching comes from containers in the page (but I may be wrong), but I have no clue as to what prevents the height changes to take effect.
Sorry if it's not really understandable. This is my first question here and I'm still a beginner in HTML/CSS.
So I have a website that has a hamburger menu on mobile.
The problem is that whenever the page loads on a small device, the hamburger menu is way outside the view port to the right. This causes side scrolling issues and tons of white space.
I originally assumed I had written some css that was causing this, but after experimenting, I've come to realize that I do not know what is going on at all.
I have Gifs of the problem. I will also provide a URL if needed.
Heres the first gif
https://gfycat.com/GiftedPlaintiveEgret
So heres what is happening. I am inspecting the DOM of the webpage. If you pick any random element on the page, and edit a CSS attribute, then the menu fixes itself. It doesn't matter what element you select or what css attribute you edit; when you make an adjustment the problem is fixed.
Here is the second gif
https://gfycat.com/EasyIllustriousBlackbear
In this gif, the issue is literally fixed just by activating a CSS plugin called pesticide. Pesticide simply adds another external css sheet to the document that outlines everything in blue. Notice that even when I turn off pesiticde, my issue has been fixed.
And finally the third gif
https://gfycat.com/ContentRepentantBeetle
This is the most perplexing issue. It fixes the hamburger icon simply by resizing my browser screen. Obviously mobile users cant do this.
I truly don't understand this issue. I've tried to set a width of 100% on the nav element. I've written some javascript that when the DOM is ready, to add a css attribute to a a DIV in the footer and then remove it after a few seconds. This does not fix my issue. I would happily provide the javascript I wrote if requested.
Has anyone else ever had an issue like this?
EDIT
Here is another example. I use the browser Blisk to test my sites on multiple devices. Look at this
https://gfycat.com/BouncyFlakyGlobefish
When I first load up the site, I have my hamburger menu issue. When I tell the browser to view the site from a different device 'say switching from iphone 5 to iphone 6' it fixes the issue. I am so frustrated with this problem.
The white section's animation is increasing the width of the page (pushing the hamburger which is fixed to the right out of view), I'm not certain why this doesn't update properly after the animation is complete, but it would appear it requires a page re-flow before working correctly.
A possible CSS fix would be to add .bodymargins{overflow:hidden} though this may cause problems to other styling (untested on your site)
If this isn't an option, you could manually trigger a re-flow of the page shortly after loading (this is a slightly nasty option, but is better than it being broken)
Various re-flow options available here
It may be because you are using media queries and your browser width is not yet small enough for them to fire when you test.
If not, make the media queries and don't use the margin-left:auto for the smaller screen size?
I have this website; http://kieronboz.co.uk/inspired/
Im a beginner to web design, so forgive me :P
If you click on the top link in the ugly navigation bar on the left, a new page is loaded, I thought it might be a good idea to now shrink the header image for the non-main pages, so I was thinking a jquery script to make it 'slide' up when the page is loaded, to the top of the light white border around Inspired Marketing, so it would turn into a smaller header!
Anyway, problem is I cant find anything like this in google, I have seen the jquery slideup function but im having trouble implementing it in such a naked fashion as the code reference sheets present it.
If this is a terrible idea and there's better options, ill hear those too! Thanks again
Simply add to the header the margin-top: -540px; (or via jquery: $("#header").css("marginTop","-540px");
You may use jquery.animate to add an animation to it.
As to doing it only on pages that are not the index - Either include the script doing it only to non-index pages, or use document.location.href to figure out whether you're on index or not.
Need your help.
I created a static semi-opaque banner which stays at the top of a website. When a user scrolls the website the entire container objects goes underneath the banner. I want all the objects (images, text..etc) getting blury effect as it goes underneath the banner.
Thanks
The only way you're going to be able to do this is by getting fancy with some CSS and javascript. CSS doesn't support blur directly, but you can emulate it with text-shadow. Images can also be blurred with a little jquery/css/javascript magic, but will be problematic because you can't partially blur an image (what happens when only part of the image is under the banner?). It could probably be done by layering your images and keeping track of their position on screen, but all of this seems like a lot of work for a very small return.
So, assuming you've decided to give all of this a shot, you're going to have to use javascript to determine which parts of the page have passed under the banner and apply the style to those parts. The difficulty of this task will scale with the complexity of your page layout. In a best case scenario, your banner and content container are both 100% the width of the html body. At this point, it would be fairly trivial to write some kind of scanner that traverses the dom every time you page scroll to find elements that the blur should be applied to. However, best-case-scenario is rarely the case at hand, at which point I'd recommend abandoning the effort to pursue something with a greater ROI.
This isn't possible with CSS nor jQuery. You might be able to do something with IE's filters, however that's IE only (of course), and will invalidate your CSS.
Currently, there is no way to do this, although something might come along in CSS 4 or something.
The Chrome nightly builds support some filters, however there isn't an alpha blur filter (yet, at least).
I saw a site a month or two ago that had anchors fixed to the right side of the page that would not scroll when the page was scrolled. That alone is not hard to do with CSS.
But on that site, the fixed anchors were dynamically generated based on the section headers in the page. And they were proportionately spaced down the right side of the page in relation to their position in the document.
In essence, it created a mini-map of the entire document, giving a visual overview of what was in the document, and the spacing between sections of the document, all within the current viewport. You could quickly see how large each section was in relation to each other. Maybe I should call it a table-of-contents instead of a mini-map.
I believe this was on a documentation page for an API of some sort. I think it worked really well for navigation, and want to build something like it for some documentation I need to do.
In a way, it reminded me of the minimap on the right side of Sublime Text 2, but only major headings were shown and they were depicted as buttons fixed to the right side of the page.
Unfortunately, I can't remember or find the site I saw it on. Has anyone seen an example of something like this? I'd love to see some examples before I start implementing it. Or do any tools exist for doing this, jquery plugins, etc?