i try to use :target css3 in a webapp with jQueryMobile but the hash in the href send event.
i try to put false on hash event but it's doesn't work.
Did you got ways or ideas ?
thx so !
i've go this type of menu :
<nav>
<ul>
<li><img alt="Home" src="home.png">
<li><img alt="Apps" src="apps.png">
<li><img alt="Pics" src="pics.png">
<li><img alt="Chat" src="chat.png">
</ul>
</nav>
and this kind of section :
<section id="home">
<h1>Welcome :)</h1>
<p>
without highly efficient portals. Distinctively recaptiualize bricks and
clicks laboration and idea sharing through holistic business models.
</p>
</section>
[...]
this elements are on a single page and i try to use this css3 :target
#home:target {
margin-top:-1200px;
}
but jQueryMobile try to find the page #home
and my mobile init have got :
$(document).bind("mobileinit", function(){
$.mobile.defaultPageTransition = 'flip';
$.mobile.ajaxEnabled = true;
$.mobile.hashListeningEnabled = false;
});
package are here : http://www.oxynel.com/jqm-css3-target.zip
sorry i've got images and i just discover exemple on jsfiddle !
Best
Fabian
on your link try:
data-role="none" JQM should leave the link alone.
Related
On my TYPO3 website (v6.2) I use CE backend Layout to allow my teammates to insert content easily. Problem : tag are automatically generated and break all my layout (seems like html anchors to inserted content). This is what it looks like :
<ul id="timeline">
<a id="c3837"></a>
<li> CONTENT HERE</li>
<a id="c3842"></a>
<li> CONTENT HERE</li>
<a id="c3845"></a>
<li> CONTENT HERE</li>
</ul>
I tried several fix to remove them :
tt_content.stdWrap.innerWrap.cObject.default >
tt_content.stdWrap.innerWrap >
tt_content.stdWrap.innerWrap.cObject.default.10.cObject.default.value =
... with no success.
Do you have any idea to solve this issue ?
Thanks !
SOLVED ! Thanks to this stack overflow topic.
I tried "tt_content.stdWrap.prepend >" and it works.
I have several links on a page. I want to create a modal alert window for each link letting people know they are leaving the site. (It's a requirement for our website.) The code I am using will only allow one modal open on a page. Can you help me figure out how to get a different modals to open for each link?
Here's the javascript:
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
The HTML:
<p><a href='#' onclick='overlay()'>Click here to show the overlay</a></p>
The HTML for the Modal:
<div id="overlay">
<div>
<p align="left">You are about to leave the website.</p>
<p align="left"></p>
<p align="left">Click here to <a href='#' onclick='overlay()'>cancel</a></p>
</div>
i tried since friday to install a playlist plugin to videojs but it dosent work for me.
i want this plugin : https://github.com/Belelros/videojs-playLists i red the documentation but i cant figured out what the problem is.
here are my Code snippets
<video class="video-js vjs-default-skin"
controls preload="auto" width="530" height="298"
data-setup='{"plugins":{"videojs-playlists"} } '>
<source src="../../../../../fileadmin/Film01.mp4" type='video/mp4' />
</video>
</div>
<div class="vt-video-player-playlist">
<ul>
<li data-videoplaylist="0">Critical Chain - in 5 Minuten erklärt</li>
<li data-videoplaylist="1">Critical Chain Multi Projektmanagement</li>
<li>Results of Critical Chain at von Ardenne..</li>
<li>Zuverlässige Projekte - Sichere Liquidität</li>
</ul>
</div>
</div>
and at the end of the site i load the js files
<script src="../../../Public/3rd/jquery-1.10.2/jquery-1.10.2.min.js"></script>
<script src="../../../Public/Js/common.js"></script>
<script src="../../../Public/Js/menuslider.js"></script>
<script src="../../../Public/3rd/video-js/video.js"></script>
<script src="../../../Public/3rd/videojs-playLists-master/dist/videojs-playlists.js"></script>
<script src="../../../Public/Js/videoplayer-settings.js"></script>
i hope you can help me. thanks in advance!
Well, there is currently an issue with the playlist which is basically this one:
https://github.com/Belelros/videojs-playLists/issues/6
The thing is that I was using some minified var name for getting videojs instance. I need to fix that ASAP. However, as a workaround, you can edit in Line 22 of videojs-playlist, and replace this:
player.pl.el = player.N;
By this:
player.pl.el = player.a;
Worked for me on another file... Not an optimal solution but should at least work.
I have a single-page scrolling website. It uses a fixed-position nav bar with jquery to scroll to different sections of the website. The site works fine except for on the iOS (I haven't tested it on Android). On iOS, after clicking a link, the navigation freezes until you manually scroll up or down. For some reason the link stays active until you scroll. Is this a bug in Mobile Safari? Is there some workaround?
Here's the basic HTML:
<body>
<ul class="nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact Me</li>
</ul>
<div class = "page" id = "home"> </div>
<!-- About -->
<div class = "page" id="about">
<div class="pagebreak"></div>
</div>
<!-- Portfolio -->
<div class = "page" id="portfolio">
<div class="pagebreak"></div>
</div>
<!-- Contact Me -->
<div class = "page" id="contact">
<div class="pagebreak"></div>
</div>
</body>
Here's the actual site if you would like to see the problem: http://boundincode.com
BTW, I don't think this is a jquery or javascript issue because even if I remove the javascript and the jquery, the problem persists.
I'll add another answer since it's completely separate from my original one.
Since you need a temporary workaround, you might find what you're looking for in iScroll 4. I'd used it to do what you're trying to accomplish in pre-iOS 5 days so it might be worth looking into.
position: fixed support was only added to Mobile Safari in iOS 5, so it's likely that the implementation of it is still buggy, especially if you're seeing the same problem in other sites. Probably worth filing a bug report with Apple.
I'm trying to use jQuery show and hide which seem to work ok in Safari, when I try it on the iPhone, it doesn't work at all. Here is my code;
<script type="text/javascript">
$("#showSearch").click(function () {
$("#searchform").show(1000);
});
</script>
It's a button that when clicked, will show the search form. The form doesn't show on iPhone. Also when I add $('#showSearch').remove(); in there, it doesn't get removed, even if I add a function as the second parameter of show() it still doesn't hide the button.
Thanks for your help.
jQuery Docs:
http://api.jquery.com/show/ (Shows)
http://api.jquery.com/hide/ (Hides)
http://api.jquery.com/remove/ (Deletes)
http://api.jquery.com/toggle/ (Show/Hide)
Live Example:
http://jsfiddle.net/qQnsj/1/
JS
$('#viewMeButton').click(function() {
$('#viewMe').toggle(); // used toggle instead of .show() or .hide()
});
$('#removeMeButton').click(function() {
$('#removeMe').remove();
});
HTML
<div data-role="page" id="home">
<div data-role="content">
<div id="viewMe">
Hello I'm in the div tag, can you see me?
</div>
<br />
<button id="viewMeButton">Show / Hide</button>
<br />
<div id="removeMe">
Click the button to remove me
</div>
<br />
<button id="removeMeButton">Remove Me</button>
</div>
</div>
I know this is an old question, but I recently had a similar problem. Hopefully this will help someone else if they find this question, too.
I was trying to hide a set of ui-block-* elements in a JQM grid. On the same grid cells, my media query for the iPhone was setting display: block !important. That was winning.
The !important directive was unnecessary in my case and when I removed it the calls to hide() and show() began working as expected.