This is my first time doodling with jquery-mobile. I designed a theme, and now I'm trying to implement it...
Things aren't going as smooth as expected, while I've good understanding of jquery/javascript in general, I really don't like working with frameworks with their quirks and specific syntax.
Anyhow, please check: http://mac.idev.ge:800/html5-mobile/iradio.html
Problem:
Try to click in the area of the player, on the album cover for example, notice how blank space appears on the top of lyrics area? What is that? Same happens if you click near song title..
This is baffling...
Any ideas how to fix this unwanted behaviour? And what is it?
Add this attribute to your header/content div
data-tap-toggle="false"
There are a couple of questions related to this problem:
Jquery mobile: Disable "tap to toggle" fixed header and footer
How to fix jQuery Mobile's fixed footer?
They seem to depend on which version you are using but give them a try
Related
I've been looking for answers, but everything I could find does not seem to fix my problem.
I have a jQuery carousel that lazy-load images on demand (Slick Carousel). My problem is that when you're sliding the images, a thin grey border appears around the img placeholder (most of all on chrome and webkit browsers, but sometimes in firefox with a dotted line). When you click anywhere on the screen, the lines disappear, but if you continue sliding they come around each image.
I've set CSS properties border and outline to 0 and none, I tried to disable the lazy-loading to have a src too, but nothing seemed to make the little border disappear.
Does anyone know how to get rid of it?
I have attached two screenshots, one with the lines and one without them (After clicking in the background, they disappear):
This is the border for the active link element. Quick & dirty solution: Listen for the click event, then focus() on something else.
I got inspiration when writing this, so I checked the issues in the GitHub page of the slider and found this:
https://github.com/kenwheeler/slick/issues/1636
putting outline:none; in the corresponding container fixes it.
Thanks also to Thomas Landauer, haven't I checked the GitHub issues, your answer would have definitely put me in the right direction.
First off, please excuse my English as it is not my first language.
I have encountered a very weird issue in an online store I am working on. It only happens in Chrome and I simply couldn't figure out what's going on and it's driving me crazy :(
This is the website I am talking about:
heavenlynature.co.nz
To replicate the issue (please bear with me), you need to add a couple of individual items to the shopping cart (at least 2 different items, then click the shopping cart icon (heavenlynature.co.nz/cart), shrink the browser viewport just below the first line of item, like the image below:
http://francisthedesigner.co.nz/images/test/2.png
Then drag the scroll bar downwards, you will find a block of div blocking over the top of the text/image (please try refreshing until the issue appears as sometimes it appears to be loading correctly), like the image below:
http://francisthedesigner.co.nz/images/test/3.png
But as soon as you highlight the page or hover over the div it just disappears. Now this only happens in Chrome and Firefox doesn't seem to replicate this issue.
It seems to happen only in the checkout screens, really losing it trying to make this work, any help will be greatly appreciated :)
Unfortunately even after following your instructions i couldn't replicate your issue. Can you please try to go on your Chrome under Tools/Extensions and disable them all?
Can you also try to replicate this issue from an other computer?
I have searched and searched for what I thought was a common practice on the web. Im looking for a simple solution (css, jquery, etc) to make a form appear in the center of the screen when a button is clicked. I want the background to fade out a bit to leave the focus on the new element/div. I have played with opacity, but it seems there isn't very good solutions that leaves the form in the middle from being faded as well. I have seen it, so I know it's doable. Any help is WAY appreciated!
If what you are looking for is a "modal popup window" then the following resources may interest you.
Have a look at jQueryUI and particularly the Dialog - Modal Form example which does what you want.
This css/javascript solution allows any content to be displayed in the popup. Worked like a charm for me.
Very cool JS components: http://www.msnbc.msn.com/id/40664031/ns/us_news-crime_and_courts/
Check out the icons next to the vertical scrollbar in your browser, and the expanding 'sharing' toolbar at the bottom.
Does anybody know if these are publicly available components? Has anybody seen these before?
Edit: I'm talking about:
The way the sections in the bottom bar expand into tabs to show more controls. Try clicking on "Login and settings", for example.
The way the links near the scrollbar take you to the respective sections. Very cool tool to aid user discovery in a long page.
I was intrigued by the scroll markers used for jumping around the page so I made a start at replicating the functionality in a plugin:
https://github.com/sj26/jquery.scrollmarkers
It's definitely not pretty yet, but it's a start.
Its a private library built by Krux Digital, Inc.
I dug into the source of http://cdn.krxd.net/krux.js
Its ajax tabs..
Also, you can have a bar fixed at bottom of page simply by using
position:fixed
property in css, then in the div at bottom, impliment jQuery.tabs, and for each tab load data via ajax. Wont be that difficult. and if MSN has implemented it, they would have surely spent a lot of time on it
We're using this autoscroller script: http://scripterlative.com/files/autodivscroll.htm (the bottom version).
However, we got really stuck since we don't know how to replace the moving "scrollbar" on the scroller side with a pure and simple line with up arrow on top and bottom arrow on bottom.
Functions wise we want this sidebar to behave exactly like the original sidebar and of course be cross browser compatible. We just want to get rid of the original scrollbar and replace it with a much cleaner and more stylish style.
Is this doable?! How?
Best regards Stefan
Just found jScrollPane on AjaxRain.
Implementing an autoscroll would take some coding, but should definitely be possible by just sending the click messages to the div manually so that it would do the scrolling. If it looks like this will suit your needs, I'd chip in with some additional implementation code. That topic may actually be better suited for another question, if you decide on jScrollPane.
Edit: updated link above. also, there are demos there for scrolling on hover and clicking on a link to jump to an anchor. Custom code for an autoscroll should be relatively simple to write from there.