i'm working on a web mobile site and i'm having some problems that I really don't know how to solve them
I've added a sliding menu (like facebook's menu) but the problem is that my menu is longer than my page and when I scroll down I still get the menu but without the background color already defined
when I test it on a desktop navigator (chrome) it works perfectly but it I resize the window and make it smaller it invokes the same error
excuse me for my bad english & thanks for help ^^
html:
<div data-role="page" id="contactF" class="pages" data-add-back-btn="true" data-iconpos="notext">
<div data-role="panel" id="menu" data-position="left" data-display="push">
<ul id="menuList" data-role="listview" >
<h3>Menu</h3>
<li data-role="list-divider"><h6>réseaux sociaux<h6/></li>
<li>Facebook </li>
<li>Twitter </li>
<li>MySpace </li>
</ul>
</div>
<div data-role="header" id ="HeaderC" data-position="fixed">
<!-- end of header -->
<div data-role="content">
</div>
<!-- /content -->
<div data-role="footer" data-position="fixed">
</div>
</div>
js:
$( document ).on("swipeleft swiperight", "#menu", function( e ) {
if ($.mobile.activePage.jqmData( "panel" ) !== "open") {
if ( e.type === "swipeleft" ) {
$( "#right-panel" ).panel( "open" );
} else if ( e.type === "swiperight" ) {
$( "#left-panel" ).panel( "open" );
}
}
else if ($.mobile.activePage.jqmData( "panel" ) == "open"){
$( "#left-panel" ).panel( "close" );
$( "#right-panel" ).panel( "close" );
}
});
Related
I have a sidebar item which contains a list of comments. I want this item to show only if there are any available comment in the beginning and in order for my template to work I have to put a different style to the first comment than the rest. All the comments are being passed on my Model.
Here is my approach:
#if(Model.Comments?.Count > 0) {
<div class="sidebar_item">
<div class="item_inner slider">
<h4>See what students say:</h4>
<div id="single_banner">
<ul class="slides">
#for (int i = 0; i < Model.Comments.Count; i++)
{
if (i > 0){
<li style="display:none;">
}
#if( i == 0)
{
<li>
}
#Model.Comments[i].Comment
<div class="carousal_bottom">
<div class="thumb">
<img src="img/courses/testi_thumb.png" draggable="false" alt="" />
</div>
<div class="thumb_title">
<span class="author_name">#Model.Comments[i].Student</span>
</div>
</div>
</li>
}
</ul>
</div><!--end banner-->
</div><!--slider-->
</div><!--end sidebar item-->
}
The problem is that this doesn't work and I get errors that some curly brackets are missing or that some elements haven't closed properly. Any help appreciated.
I get errors that [...] some elements haven't closed properly.
The following code isn't recommended because the engine isn't smart enough to determine start/ends for html elements in c# code:
if (i > 0){
<li style="display:none;">
}
#if( i == 0)
{
<li>
}
So I generally put the logic directly in the tag:
<li style="#(i > 0 ? "display:none;" : string.Empty)">
However I'm not really a fan of logic in my view. Additionally to make things easier IMHO, I would have a comment display template. And I personally think there is no good reason to not use classes. Eventually my code would look like:
controller:
foreach(var comment in Model.Comments)
{
comment.IsVisible = comment == Model.Comments.First();
}
view:
// Update Model with Property
// bool HasComments { get { return Comments.Any(); } }
// Then the code actually reads/documents itself
#if(Model.HasComments) {
<div class="sidebar_item">
<div class="item_inner slider">
<h4>See what students say:</h4>
<div id="single_banner">
<ul class="slides">
#Html.DisplayFor(m => m.Comments);
</ul>
</div><!--end banner-->
</div><!--slider-->
</div><!--end sidebar item-->
}
displaytemplates/comments.cshtml
#{
// View logic, it only deals with html/css/javascript
var liClass = model.IsVisible ? string.Empty : "is-not-visible";
}
<li class="#liClass">
#Model.Comments[i].Comment
<div class="carousal_bottom">
<div class="thumb">
<img src="img/courses/testi_thumb.png" draggable="false" alt="" />
</div>
<div class="thumb_title">
<span class="author_name">#Model.Student</span>
</div>
</div>
</li>
Less code and more encapsulated.
I'd also recommend reading Philip Walton - Decoupling Your HTML, CSS, and JavaScript
I am creating an audio player of sorts and i have run into a brick wall. I have added a progress bar that updates according to the song being played.
However, I want the progress bar to be clickable and to jump to the time of the track when its clicked (like every regular player).
<div class="music-stream-wrapper">
<ul class="music-stream">
<li>
<div class="player-wrapper">
<div class="album-art">
<img src="https://i1.sndcdn.com/artworks-000108593302-0ek7n6-t120x120.jpg" alt="" />
</div>
<div class="meta-controls">
<div class="play-controls">
<!-- Content -->
<div class="track">
<h4 class="title">Tail toddle - Unknown</h4>
<span class="author">john.doe</span>
<span class="uploaded">a few seconds ago</span>
</div>
<div class="spectrum">
<div class="play-pause-button">
</div>
<div class="spectrum-wrapper">
<div id="spectrum_11"></div>
<div class="progress">
<progress value="0" max="1"></progress>
</div>
</div>
</div>
</div>
<div class="intent">
<ul class="buttons">
<li>Like</li>
<li>Download</li>
<li>Share</li>
</ul>
<ul class="meta">
<li><span class="liked">♥ 13</span></li>
<li><span class="played">► 123</span></li>
<li><span>♥ 3</span></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
<audio src="http://tonycuffe.com/mp3/tailtoddle_lo.mp3" id="mockSong"></audio>
I have created a mock player in CodePen heres the url: View in CodePen
I ended up using a jQuery UI slider and updating it dynamically as the track position changed.
It will help you. try to evaluate what you desire for
http://jsfiddle.net/ryanhagz/8u76B/20/
HTML
<div id="progress"></div>
<div id="back">back</div>
<div id="cont">cont</div>
JAVASCRIPT
//PROGRESS BAR
$("#progress").progressbar({
value: 0
});
//UPDATING PROGRESS BAR WHEN CONTINUE BUTTON CLICKED
var currValue = 0,
toValue = 0;
$("#cont").button().click(function () {
currValue = $("#progress").progressbar("value");
if (currValue + 25 <= 100) {
toValue = currValue + 25;
animateProgress();
}
});
//DECREASING PROGRESS BAR WHEN GO BACK BUTTON CLICKED
$("#back").button().click(function () {
currValue = $("#progress").progressbar("value");
if (currValue - 25 >= 0) {
toValue = currValue - 25;
animateProgress();
}
});
function animateProgress() {
if (currValue < toValue) {
$("#progress").progressbar("value", currValue + 1);
currValue = $("#progress").progressbar("value");
setTimeout(animateProgress, 4);
} else if (currValue > toValue) {
$("#progress").progressbar("value", currValue - 1);
currValue = $("#progress").progressbar("value");
setTimeout(animateProgress, 4);
}
}
I've run into a problem with Foundation 5. If I want to use position:fixed on a div that is part of the Foundation Grid, it pops it out of the grid and aligns with the left edge of the row. Is there a work around for this?
<div id="right" class="medium-4 columns show-for-medium-up" >
<dl class="tabs" data-tab>
<dd class="active">Recent</dd>
<dd>Popular</dd>
</dl>
<div class="tabs-content">
<div class="content active" id="recent">
<ul>
<?php
$query= new WP_Query();
$query->query(array('posts_per_page'=>10));
while ($query->have_posts()) : $query->the_post();
?>
<li><?php the_title();?></li>
<?php endwhile; wp_reset_query();?>
</ul>
</div><!-- END .content -->
<div class="content" id="popular">
Popular posts
</div>
</div><!-- END .tabs-content -->
</div><!-- END #right -->
<script>
$(document).scroll(function() {
var y = $(document).scrollTop(), right = $("#right");
if(y >= 160) {
right.css({position: "fixed"});
} else {
right.css({position: "relative"});
}
});
</script>
As far as I understand you want to create a sticky top bar (Fixed Navigation or Contain to Grid), so when user scrolls bottom, the bar will display your recent and popular posts.
See how it should be done by reading the documentation.
I have a dropdown menu:
<div class="buttons">
<div class="dropdown">
<span class="label">File</span><span class="toggle"></span>
<div class="dropdown-slider">
<span class="label">New</span>
<span class="label">Save</span>
</div> <!-- /.dropdown-slider -->
</div> <!-- /.dropdown -->
</div>
And here is js code:
<script>
$(document).ready(function() {
// Toggle the dropdown menu's
$(".dropdown .button, .dropdown button").click(function () {
$(this).parent().find('.dropdown-slider').slideToggle('fast');
$(this).find('span.toggle').toggleClass('active');
return false;
});
});
// Close open dropdown slider by clicking elsewhwere on page
$(document).bind('click', function (e) {
if (e.target.id != $('.dropdown').attr('class')) {
$('.dropdown-slider').slideUp();
$('span.toggle').removeClass('active');
}
});
</script>
If I put the two menus (one above other) I'll get popup menu below the second menu line.
How can I fix it?
Adding z-index:999; to div.dropdown-slider should fix your problem pretty quickly.
I'm using several WordPress loops and jQuery UI Tabs that result in the Main tabs and entry-content div markup below. The WordPress loops generate the "entry-post" markup in each tab div, but I'm not showing the php, as the resulting html markup in each tab div is the important part.
I'm also using a bit of jQuery to independently expand/collapse each entry-content div:
$(".entry-content").hide();
$(".entry-title").click(function() {
$(this).parent().children(".entry-content").slideToggle(500); });
What I've found is that each of the entry-content divs keeps their expanded state when switching tabs, i.e. if some of the entry-content divs are expanded in tabone and I switch to tabtwo and then back to tabone, they're still expanded in tabone.
What I need to do is collapse all the entry-content divs in a tab when a tab is changed. Below is the tab init and also the fx to change the tabs.
What do I need to add to this function to collapse all the entry-content divs when a tab is changed?
$(document).ready(function(){
var $tabs= $("#tabs").tabs();
});
$(function() {
$('#tabs').tabs({
fx: { opacity:'toggle' }
});
});
Main tabs and entry-content div markup:
<div id="tabs">
<ul>
<li>tabone</li>
<li>tabtwo</li>
<li>tabthree</li>
</ul>
<div id="tabone">
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
</div>
<div id="tabtwo">
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
</div>
<div id="tabthree">
....
</div></div>
The following code should collapse all .entry-content divs whenever a new tab is selected:
$(document).ready(function() {
var $tabs= $("#tabs").tabs({
fx : {
opacity: 'toggle'
},
select : function(event, ui) {
$(".entry-content").hide();
}
});
});
$("div.post [name^="entry-title"]").hide();
should do what you're wanting when attached next to your fx.
or:
$("#tabs a").click(function () {
$("div.post [name^="entry-title"]").hide();
});
I'm not sure i understand you're question completely. But if you wan't to check whether the tab is triggered or not, try use this:
$( ".selector" ).tabs({
show: function(event, ui) { ... }
});
Simplified how you could collapse all divs with class "entry-post", whenever the tab is showed:
$(document).ready(function(){
var $tabs = $("#tabs").tabs({
show: function(){
$('.entry-post').hide();
}
});
});
I'm not a jQuery expert, so here's straight javascript. Might at least help solve the problem...
Since you don't care what tab a div is on (since all divs should be hidden when a tab is changed) you could simply hide all divs on the page every time a tab is changed, regardless of what tab it's on.
var divList = document.getElementsByClassName("entry-content");
for(var divitem in divList){
divitem.style.display = "none";
}
I wish my jQuery was stronger so I could give it in that, but it may help...
Edit:
Just looking at what your example code, I guess something like this in jQuery:
$("#tabs a").click(function() { $(".entry-content").hide(); });
Something that closes all entry-content class divs when any tab is clicked.
You may want to make use of the existing jquery UI tabs library and this will solve a lot of your problems.
http://jqueryui.com/demos/tabs/
Using this will allow you to make a better association between your list items and the divs they are controlling. Add the reference in your header
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
or download it and remove what you don't need. Add the following to your CSS
.ui-tabs .ui-tabs-hide {
display: none !important;
}
and change your references so they are in keeping with the jqueryUI specification
<div id="tabs">
<ul>
<li>tabone</li>
and then the div ids to match
<div id="tabs-1">
<div class="entry-post">
this should make the association. You can then add the controlling behaviour so it should read
$(document).ready(function(){
$(function() {
$('#tabs').tabs();
});
and that will do away with the need to store the array of divs
you can then bind a function to the tabselect event which will hide the divs you want to collapse
$('#tabs').bind('tabsselect', function(event, ui) {
$('#tabs').children().not(ui.panel).children().children(".entry-content").hide();
});
your code should then read:
<head>
<title>Collapse Divs</title>
<style type="text/css">
.ui-tabs .ui-tabs-hide {
display: none !important;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$('#tabs').tabs();
});
$('#tabs').bind('tabsselect', function(event, ui) {
$('#tabs').children().not(ui.panel).children().children(".entry-content").hide();
});
$(".entry-content").hide();
$(".entry-title").click(function() {
$(this).parent().children(".entry-content").slideToggle(500);
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>tabone</li>
<li>tabtwo</li>
<li>tabthree</li>
</ul>
<div id="tabs-1">
<div class="entry-post">
...
<h1 class="entry-title">Title 3.3</h1>
<div class="entry-content">Lorem ipsum...</div>
</div>
</div>
</body>