Responsive Javascript not working on one of the pages - javascript

I just implented a responsive design for www.star-registration.com.
It seems to work fine on most of the browsers but on some the startpage www.star-registration.com isn't working but www.star-registration.com/order/ and all other pages work fine.
The problem occurs when I use firefox and resize the browser. I quess it's because of the Javascript files http://www.star-registration.com/skin/frontend/default/sterntaufeeUSA/js/responsive_slider/responsive_slider.js and http://www.star-registration.com/skin/frontend/default/sterntaufeeUSA/js/jquery.slicknav.js
any suggestions why the startpage isn't getting displayed properly?

It is indeed because you use JS. The JS checks the width of the screen only once (as far as I see at least), so when the page loads it aplies the different styles, but not when resizing.
I would suggest CSS Media Queries instead.
Check the W3Schools Instructions

Related

Responsive JavaScript Menu Not Showing in Mobile View

I implemented a navigation menu on this website. While the menu works very well in desktop mode, it will not work in mobile viewing. I think there is an issue with connecting to the JavaScript - https://alexandrachel.org/scripts/script.js
The navigation menu should work like this website
How I can get the navigation menu in mobile viewing to work?
Your whole site is not responsive, so either write media query to make it responsive , or else for minimal responsive you can use bootstrap framework which is lightweight and easy to use and for more responsive mobile menus also you can use smart menus . So, its your choice either you write raw custom code or use the resources.
What the script does, is it changes the CSS for the small displays, so the menu is transformed to become a drop-down on handheld devices. However, the current problem is that the script cannot start, because it cannot find jQuery. And thus, on small displays, the CSS is incorrect and your menu is not visible (however it is there, and functional).
If you load your webpage over HTTPS (as in https://alexandrachel.org/), then the scripts and CSS files should also be requested via a secure protocol.
Try changing a request to jQuery to (note https://):
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
And you can remove the second request of version 1.10.2 from googleapis.com, since you are already pulling the latest version from jquery.com.
Errors in loading your website ref: Chrome Dev Tools
jQuery can't be found plus a lot of your content is being served over http whereas the main website loads on https so just fix those requests and import jQuery.
And this should work
Ref: to the attached image for the errors

CSS completely stopped working on my Blogspot.com site

I've been working on a CSS / HTML drop down navigation for my blogspot.com site. After coding it a few hours I had accidentally closed the tab to find out no matter what or where I tried the CSS on blogspot, the CSS wouldn't work again. Now, the HTML/CSS works anywhere else, just not on blogspot anymore.
These are the things I did:
1. Created a entire new blog under the same account, then applied
html/css
2. Cleared cookies, cache and restarted browser
3. Tried multiple browsers
4. Used stylish extension to override
5. Used console in firefox to edit HTML on other sites and added my
code to see if it worked elseware
6. Used a different computer
7. Used mobile network instead of ISP
Despite doing everything pretty much to get the css/html to work blogspot, it will refuse it now no matter what. I am guessing it is obviously an issues with blogspot.com such as a glitch or bug that I may have now caused. It also shows a lot of CSS code struck out in the styles inspector when you inspect a site via right-click.
I dab in javascript / jquery sometimes and I am wondering if there is a way to force my CSS to force override.
CSS/HTML http://jsfiddle.net/rpksx66u/
My blogspot site: https://vitalintel.blogspot.com/
Im about to pull my hair out.
update: so I moved the css/html/script element to another part of the page and it works. When the element is placed in the Cross-Column's sections in layout, it refuses to use any CSS.

Website not displaying correctly in Safari and Chrome

I'm a complete newbie here. I have been trying to learn to code a site with HTML/CSS/JAVASCRIPT.
I am using brackets to code the site. The site I am practicing with renders properly with all css and javascript.
However when I open the .html file into safari or firefox it does not display correctly. I think it is probably a css issue as the html elements are all there.
I have other sites that I have made before that don't have this issue and I can not see where I have gone wrong.
jsfiddle.net/fs4g55m2/1 I'm using fullpage.js as well. If you notice the navbar works perfectly well. It seems to be the css after it that is corrupted (once you get to the body tag).
If you think it is CSS (and you are linking to external CSS file) try look into the network tabs in your browser's developer console to see if it is properly linked. Check to see if requested css file throw back 404 status (not found) - usually highlighted in red.
In chrome or Firefox (not sure in safari) right click on your web page and click inspect element - then choose network tab.
Hope that helps

Using javascript to build android scrollable tab design

http://developer.android.com/design/building-blocks/tabs.html#scrollable
Has anyone achieved this effect in a web app using JavaScript (or even jQuery)?
Got the pages sliding nicely (obviously that's the easy part), but getting the page titles to animate correctly looks like it could be painful!
May just go with the fixed tab layout but if anyone has any tips or examples, I would be very grateful...
There's a CSS which makes your page look like Android:
https://github.com/proimage/Android-4-ICS-CSS
There's a more advanced project with some JS:
http://jaunesarmiento.me/fries/index.html
And this is the way to do page swiping:
http://stereobit.github.io/dragend/ (also works on the PC)
http://swipejs.com/ (only works on touch device)
http://eightmedia.github.io/hammer.js/ (only triggers the event, doen't swipe the page)
With these you can have multiple pages in one HTML file:
http://handlebarsjs.com/
https://github.com/janl/mustache.js
http://underscorejs.org/
http://embeddedjs.com/
http://jade-lang.com/
https://github.com/blueimp/JavaScript-Templates
I'm working myself to combine some of these libs into a usable application. Hope it helps. This is also a note to myself.

Responsive Design Testing using IFrames facing problems with IE7 and IE8

I am trying to create a page which accepts URL of the website and shows me all the display sizes horizontally.
something like this : http://dfcb.github.com/Responsivator/
or
something like this : http://mattkersley.com/responsive/
In both the websites they are using iframes to load content in the specified width and then they are playing with width and height for different devices, it works well in all browsers apart from IE7 and IE8 I am wondering how to make it work on IE 7 and 8. There should be some way or other.
I read somewhere that http://www.ehow.com/how_8123203_use-iframes-ie8.html you can use P3P headers but I am not sure.
language is not an issue. but I just want it to be working on every browser.
I have developed a test page and kept it online : http://sentimentanalysis.comeze.com/responsiate/
if you see closely it works fine on chrome, ff, IE 9 but works pretty weird on IE7 and 8, how to make it look same? Is it possible?
Any pointers would be helpful.
Responsive design doesn't work in IE7 and 8.
Using methods like:
#media only screen and (max-width: 768px){}
do not working in IE7 or IE8, the only way around this is the client side Chrome frame.
Mobile headers (not responsive media queries)
You can send pretend mobile headers but that's about it. This would require a lot of messing about to fool the server into thinking you are on a mobile device, but it will take a lot of doing. Your server will have to request the page and all of it's assets (images, styles and scripts) and it won't show the true responsive design of the site: only the full mobile site if the target has one.

Categories