I'm trying to hide the header when scrolling down and show it again when scrolling up in mobile. Anyone know how this can be done in Intel XDK app framework 2.x using html + cordova?
I know there is examples like this https://medium.com/#mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c but it wont work inside intel xdk for me.
Question, has anyone been able to accomplish this inside the intel xdk + cordova framework, in that case how? Any help or input highly appreciated, thanks!
Yes, it works fine for me, both in the Emulator and in the Debug tab on a usb connected Android device, but I had to include jquery explicitly. I basically copied the code from the link you provided and it worked. If you're using AppFramework, there might be a possible priority issue in the CSS rules, which you should be able to fix by making the scrolling related rules more specific (class scroll or specific ids if necessary). There also could be a conflict between AppFramework and jQuery, but I'd have to see more details to address that queston.
It looks like AppFramework does interfere with header and footer, so you could also try using divs with custom classes or names in place of header and footer elements.
I did have a few bugs, which I tracked down using the Debug tab and the emulator's debugger. The thing to look for is to make sure the class on the header element changes when you scroll up and down. If that is working, then you can check the CSS rules and see if maybe something is taking priority.
Related
When developing and testing a websites responsiveness, is it wise to use chromes built in phone emulators to accurately do so?
I'm not sure what the issue is, but it could be one of these things.
Browser Cache
You may have made a change to that specific element in the past (fixed it) - but because of your browser's cache, it looks the same. Try clearing the cache on your device and see what happens.
Script Issues
There is a chance that the scripts you're using to make the arrow go up and down are a bit too much for the mobile device, and make it behave in a weird manner. Perhaps leaving it still on mobile or removing it all together would be the solution?
Edit: After looking through the errors on the website, it seems like you have quite a few errors and some critical warnings. If you patch these up, it might work on mobile.
If neither of these are a solution, let me know in the comments below.
The problem with your website seems to be a simple case of not loading CSS. Namely, you're trying to load /assets/css/app.css which appears to be missing (404).
Additionally, to fix the arrow's positioning, you'd need
#hero {
flex-direction: column;
}
Hi recently I faced a problem in which left pop that is (add of related searches) on my website is spoiling the layout specially in internet explorer 11 when I inspect the element I found it is modifying my client side code like css as follows
<body style="margin-left: 160px !important;">
Is it possible to sniff internet explorer and then write some css or js code so pop will not be able to destroy my layout?
The best resolution would be to pay for web hosting and not use free services that put ads on your site! - Shop around! Hosting can be very cheap. There isn't really a way around stopping the margin-left. You could potentially try a small amount of jQuery/javascript to change the css onload of the page. So quickly it would be something like in jQuery
$(body).css("margin-left","0px");
I hope this helps but it is not a guaranteed fix!
I am trying to put together a simple portfolio site, and have implemented a basic responsive design into the CSS as well (at the very bottom of it), and it behaves just fine - shrinks the 5 columns down to a single column and hides a few elements when I resize the computer browser. But on iPhone/Android browser it doesn't make any difference.
Here is the page in question -> Sample Page
And I can't figure out what the issue is... as in, this should be fairly simple to do, but apparently it's not, and now I'm losing sleep over it... so might as well ask here.
Have you [also] consider the use of viewport meta-tag? Just check This.
I tried loading the site but it seems like your custom js file is not found(404 error).
I'm looking for a way to distinguish which browser is used and then change properties of the DIV's background.
Right now I'm using a picture as a DIV's background and it has to have a fixed width and height. However, when the site is viewed from a mobile browser ( iOS, Android, etc..) I would like to use a simple color as a background and make it flexible in terms of the width and the height.
So.. I guess my question is if there is any good approach for distinguishing which browser is used and then changing DIV's propertied depending on the browser.
Thanks.
Michal
There's two ways to do it, one as Terrik said using Javascript and do it on the client-side, you could use this jQuery plugin to add a class into the body to do it: https://github.com/leopic/Simple-jQuery-UA-Spoofing
The other is actually doing on the server side, check the headers of the page in the request and change your content before the page even loads, for instance in PHP http://php.net/manual/en/function.get-browser.php
My recommendation is, don't do either, develop your page to be responsive and accomodate to different widths/resolutions and not browsers: http://www.alistapart.com/articles/responsive-web-design/
You could use CSS media queries
This needs to be done using client side, not server side. (i.e. JavaScript not PHP)
If you want to know more about it than just how to do it, go through this site: https://developer.mozilla.org/En/Browser_Detection_and_Cross_Browser_Support
If you just want some sample code and a quick explanation, I've used this before:
http://www.quirksmode.org/js/detect.html
Once you detect that, you can set up an if statement to determine which divs to display.
Well, there are several approach to do that.
AS Terrik said, you can use client side code to dynamic change the page but this is not necessary the best approach.
A mobile page is not only a background color change. It also can be a layout change. I suggest you to use the MVC pattern : same model, same controller but one view by "browser" (device seems to be a better term in your case). When the user thirst visit your site, send the device used to your server and display the good view (via a redirection). Don't forget to save the user agent in the user session to avoid this redirection process for next pages.
I suggest you to look at GWT, which is a powerful framework when you need multi device capabilities.
I was wondering, normally chrome extensions appear in their little area below their icon, but how would I make one that has it's own little space on a side of the browser, like FireBug lite does for chrome? Where it pushes the page up and docks at the bottom.
I have seen the sidebar in the 'experimental.sidebar' chrome api, but I don't want to use it because you have to start chrome with the command line switch --enable-experimental-extension-apis, and not many people would do that.
Basically, until sidebars graduate from experimental status, you use a content script to set a big margin or padding on one side of body or html, inject a position: fixed element into the current page overlaid on that margin, and then draw to that.
Anything that needs to persist between pages gets stored by the extension and you re-create the pseudo-sidebar every time a page is loaded.
See the Firebug Lite or StumbleUpon extensions for examples.
People usually use DOM manipulation. You can take a look at FireBugs source to see how they did the DOM. It is quite slow, but until the sidebars go out of experimental, that is the only way to do it right now.