In JQuery mobile listview, how can I replace the left-side thumbnail image with a data element?
Say I have a list of daily exercise tips. Instead of an image to the left, I want to show the "Day" of the tip. Like this:
4 Lift some weights -->
3 Do some squats -->
2 Do some pushups -->
1 Stretch your muscles -->
Assume in the "tips" model, there's a field for "Day", just like there's a field for content. Day is a number.
So, instead of this current code (which works to put a img to the left)
<div data-role="content" data-theme="d" >
<div class="content-primary">
<ul data-role="listview" >
<% #all_challenges.each do |tip| %>
<li><a href="#">
<img src="/images/icondock/accept2.png" class="ui-li-icon">
<h3><%= tip.outboundtitle %></h3>
</a>
<ul><!-- Second page with full tip -->
<li>
<br />
<p><%= tip.outgoing %></p>
</li>
</ul>
</li>
<% end %>
</ul>
I want to replace that line with a data element: <%= tip.day %>
What I can't figure out is how to let JQuery Mobile let me keep that great 32X32 space to the left, but not expect an image there. I want to put a big number (day) in there.
If I replace the img src line with <%= tip.day %> it just puts the number on TOP of the tip, and both are left justified. Two lines.
Any ideas?
Just created a sample with hardcoded values.Hope this is what you are looking for.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<style>
.day{
margin-top: -15px;
font-size:1.5em;
color:red;
}
#list .ui-link-inherit{
padding-left:30px;
}
</style>
</head>
<body>
<div id="page" data-role="page">
<div data-role="header">
<h1>Test Page</h1>
</div>
<div data-role="content">
<ul id="list" data-role="listview" data-inset="true">
<li><div class="day ui-li-icon ui-li-thumb">4</div>Lift some weights</li>
<li><div class="day ui-li-icon ui-li-thumb">3</div>Do some squats</li>
<li><div class="day ui-li-icon ui-li-thumb">2</div>Do some pushups</li>
<li><div class="day ui-li-icon ui-li-thumb">1</div>Stretch your muscles</li>
</ul>
</div>
</body>
</html>
A demo here - http://jsfiddle.net/5PPs4/
Let me know if that helps
Related
Revamping the existing website(constructed using frames) using master pages in classic asp web application.
I have created three 3 separate pages(header,content,footer) and bind the other pages and it works fine.
In few scenerioes I have to call/display a page within a page in that case the whole page loads.(header and footer)
Header Page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ABC Company</title>
<!-- basic -->
<meta charset="utf-8">
<!-- bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!-- site css -->
<link rel="stylesheet" href="css/style.css" />
</head>
<body id="default_theme" class="home_page1">
ContentHolder Page
<!--#include file="Header.asp"-->
<div id="content">
<% Call ContentHolder() %>
</div>
<!--#include file="Footer.asp"-->
PartsPage
<!--#include file="Content.asp"-->
<% Sub ContentHolder() %>
<object data="mylogin.asp" width="100%" height="700" type="text/html">
Content
</object>
<% End Sub %>
mylogin.asp Page
<%# Language="VBScript" %>
<% Option Explicit
Session("LoginID")="validuser"
Response.AddHeader "pragma","no-cache"
Response.AddHeader "cache-control","private"
Response.CacheControl = "no-cache"
Sssion("user_id")=""
Session("user_type")=""
%>
<!--#include file="Content.asp"-->
<% Sub ContentPlaceHolder() %>
<div id="Layer3">
<table>
<tr>
<td>
<p>
Please enter your UserID and Password<BR>
</p>
<FORM name="MyForm" method="post" action="myLogin1.asp">
<p>
UserID<BR>
<INPUT type="text" name="LoginID" id="LoginID" tabindex="1"><BR><BR>
Password<BR>
<INPUT type="password" name="PWD" id="PWD" tabindex="2"><BR><BR>
<INPUT TYPE="SUBMIT" VALUE="Submit Login Information" name="submit1" tabindex="3">
</p>
</FORM>
</td>
</tr>
</table>
</div>
<% End Sub %>
Footer Page
<footer>
<div class=row>
<p>
<span>All right reserved. ©2020 ABC Pvt Ltd. </span>
</p>
</div>
</footer>
</body>
</html>
So I removed server side include from the ContentHolder Page which resolves the above issue but CSS doesn't apply to ContentHolder Page.
ContentHolder Page
<div id="content">
<% Call ContentHolder() %>
</div>
ContactUsPage
<!--#include file="Content.asp"-->
<% Sub ContentHolder() %>
<h5> Contact Us</h5>
<p> If you have a question or a comment </p>
<% End Sub %>
I'm not well versed in Classic ASP, so any help you could provide would be helpful.
HTML Source
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ABC Company</title>
<!-- basic -->
<meta charset="utf-8">
<!-- bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!-- site css -->
<link rel="stylesheet" href="css/style.css" />
<!-- responsive css -->
<link rel="stylesheet" href="css/responsive.css" />
<!-- colors css -->
<link rel="stylesheet" href="css/colors.css" />
<!-- wow animation css -->
<link rel="stylesheet" href="css/animate.css" />
</head>
<body id="default_theme" class="home_page1">
<!-- header -->
<header class="header header_style1">
<div class="container">
<div class="row">
<div class="col-md-9 col-lg-10">
<div class="logo"><img src="images/logo.png" alt="#" /></div>
<div class="main_menu float-right">
<div class="menu">
<ul class="clearfix">
<li class="active">Home</li>
<li>About</li>
<li>Labour</li>
<li> Parts</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-lg-2">
<div class="right_bt"><a class="bt_main" href="accounttype.asp">Login</a> </div>
</div>
</div>
</div>
</header>
<div id="content">
<object data="mylogin.asp" width="100%" height="700" type="text/html">
</object>
</div>
<!-- footer -->
<footer>
</footer>
<!-- end footer -->
</body>
If you try to open the CSS file through your browser, does it return as text or a blank page?
If a blank page, go to your Control Panel > Turn Windows features on or off > Internet Information Services > World Wide Web Services > Common HTTP Features > Static Content. Set Static Content to on and then OK.
Reload the page now and see if the CSS renders.
I created a simple F6 app for sites and tried to copy-paste code snippets to display menu with icons. Why id doe not work neither in the topbar menu not in the off-canvas menu section? Here is the HTML code:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FDashboard</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="responsive-menu"></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="responsive-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li class="has-submenu">
One
<ul class="submenu menu vertical" data-submenu>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
<li><span>Three</span> <i class="fi-list"></i></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
<div class="off-canvas-wrapper">
<button type="button" class="button" data-toggle="offCanvas">Open Menu</button>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<!-- Your menu or Off-canvas content goes here -->
<!-- Menu -->
<ul class="vertical menu icons icon-left">
<li><i class="fi-list"></i> <span>One</span></li>
<li><i class="fi-list"></i> <span>Two</span></li>
<li><i class="fi-list"></i> <span>Three</span></li>
<li><i class="fi-list"></i> <span>Four</span></li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<!-- Your page content lives here -->
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<h1>Welcome to Foundation</h1>
</div>
</div>
</div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/what-input/dist/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/js/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Adding the below lines to app.scss hasn't solved the problem:
#include menu-base;
#include menu-expand;
#include menu-align;
#include menu-direction($dir);
#include menu-icon-position;
#include menu-icons;
#include menu-icon-position;
What is wrong here ? Thank you!
I'm not sure it to be the best and the right solution. Anyway, it works fine. So if there is a better way, it is always welcome. The described steps were made for a F6 project created with Foundation CLI.
Download Foundation Icon Fonts 3
Unzip the downloaded archive and copy its entire content into [your-project]/css folder.
Delete preview.html file (useless as is used just to display available icons).
Reference the icons CSS file in your HTML page as follows <link rel="stylesheet" href="css/foundation-icons/foundation-icons.css" />. You can put just underneath the generated during project creation <link rel="stylesheet" href="css/app.css"> line.
Use one of the icons font, for example:
<li><span>Three</span> <i class="fi-list"></i></li>
Enjoy :)
I've been putting this site together, and the series of six images (graphic1.jpg, graphic2.jpg etc) I would like to put into a sort of frame, like the attached image, so that the text always stays under the image, even on mobile if the images were squeezed down single file, and also to give some visual clarity to which bit of text goes to what image.
I'm also having trouble with the two buttons at the bottom of the page centering, despite the fact that I'm using the center code.
Also, is there a resource I can be pointed to to set the width of the nav-bar to a maximum, so that the site can have edges and a background behind/outside of that? I think there's something up with my code there.
Thanks for any help you can provide!
Brookes
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tribal Droid Studio</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="twelve columns centered">
<nav class="top-bar">
<ul class="title-area">
<li class="name"><h1>Tribal Droid Studio</h1></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>Visual Development</li>
<li>Sign Work</li>
<li>Our Process</li>
<li>Contact Us</li>
<li>About Tribal Droid</li>
</ul>
</section>
</nav>
<div class="row">
<div class="row">
<div class="large-5 columns">
<h2>Tribal Droid Studio</h2>
<p> asdf asd fasdfasdf asfghwgreqtrgafdbsfgqeth asdf gqfad </p>
</div>
<div class="large-7 columns">
</div>
<div class="large-12 columns">
<img src="img/tribalhead3.jpg"/>
</div>
<hr />
<div class="row">
<h2>Why Tribal Droid Studio?</h2>
<div class="large-12 columns">
<ul class="large-block-grid-3">
<li><img src="img/graphic1.jpg" />Graphic Design, Logo Design, and Branding all go into creating a visual identity.</li>
</panel>
<li><img src="img/graphic2.jpg" />But it can be hard to get noticed in a sea of things demanding attention.</li>
<li><img src="img/graphic3.jpg" />You may find developing one of your own to be lacking in professionalism or soul.</li>
<li><img src="img/graphic4.jpg" />At the heart of your visual identity is a story.</li>
<li><img src="img/graphic5.jpg" />Tribal Droid Studio is a team of artists and storytellers determined to turn your visions into visuals.</li>
<li><img src="img/graphic6.jpg" />Once your identity is ready, we have the signmaking tools and experience to bring it to life.</li>
</div>
<div class="row">
<divclass="small-8 small-centered columns">
<a class="button round"="contact.html">Contact us to get started!</a>
<a class="button round"="#">View our gallery of work</a>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick({
setting-name: setting-value
});
});
</script>
<script>
$(document).foundation();
</script>
</body>
</html>
![what I'd like the images and text to do together (font unimportant)][1]
First I'd go through and check your syntax... <divclass="small-8... is invalid. This can cause a break in the layout. Also... check your divs with "row" classes as it seems there are a lot of extras in this example...
I count 9 open <div> tags and only 6 close /div> tags...
For your image issues, set up some sort of css for the images to position them as you need, and then place that image, and the text for it, within a block element on the page. Right now your text is free to flow within the <li> tag and the image is free to float as well. Without some sort of container around them you are going to get separation.
I have created a master page with a basic login page and applied css in it. But i get styles only for background and footer only, other divs does not get applied.
so i decided to create a web form and copied it without contentplaceholder it works
My css code:
http://pastebin.com/raw.php?i=0N6SzL5p
My css working Web form code:
http://pastebin.com/raw.php?i=QrvttGqN
Master page code:
http://pastebin.com/raw.php?i=C2LH0SrE
And its content login page:
http://pastebin.com/raw.php?i=GdQpWnVX
I'm a newbie in asp and i'm not trolling.
If it is a silly mistake please point it out and help me
Based on your stylesheet, the problem with the master page was that you should have a wrapper <div> that surrounds all of your nested elements.
A lot of your <div id="xx"> elements should be changed to <div class="xx"> as your stylesheet is CSS class definitions. e.g.
From:
<div id="top" runat="server">
and..
<div id="mainpage" runat="server">
and..
To:
<div class="top">
and..
<div class="mainpage">
and..
<div class="footer">
Complete Master Page Changes
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Demo.master.cs" Inherits="UI.Master.Demo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<link href="../CSS/Site.css" rel="stylesheet" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<title>Demo</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="top">
<div class="topmiddle">
<div class="logreg" id="login_reg" runat="server">
Login
Register
</div>
<div class="userlog" id="user_logout" runat="server" visible="false">
Welcome<asp:Label ID="username" runat="server">!</asp:Label>
<a id="A3" href="Logout.aspx" class="atypesty" runat="server">LogOUT</a>
</div>
</div>
</div>
<div class="mainpage">
<table class="maintable">
<tr>
<td>
<img src="../Images/logo.jpg" class="logo" />
</td>
<td class="menucenter">
<ul id="Nav">
<li>
Home
</li>
<li id="Navprofile" runat="server">
<asp:LinkButton ID="lnbtn_Profile" runat="server"></asp:LinkButton>
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
</ul>
</td>
</tr>
</table>
<asp:ContentPlaceHolder ID="demo" runat="server"></asp:ContentPlaceHolder>
</div>
<div class="footer">
<p>All words, images and code copyright ©2014 demo.com. All rights reserved.</p>
</div>
</div>
</form>
</body>
</html>
I am very new to CSS. please go easy on me.
I am interested in putting a survey (using survey monkey) into a website. I want it to be in a fixed position as a side bar on the left and shrink the size of the survey box. Where am I going wrong?
<!DOCTYPE html>
<html dir='ltr' lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<div>
<head>
<title>
Home
| qfo4produce
</title>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
<link href='css/inuit.css' media='all' rel='stylesheet'>
<link href='css/grid.inuit.css' media='all' rel='stylesheet'>
<link href='css/style.css' media='all' rel='stylesheet'>
</head>
<body class='wrapper'>
<div id='header'>
<a href='index.html' rel='home'>
<img src='images/banner.png' alt="" title='Home'>
</a>
</div>
<div>
<style type="text/css">
body{
margin:0;
padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
}
div#left-sidebar{
position:fixed;
top:0;
left:-30;
iframe { width: 250px !important; }
height:100%;
}
</style>
<div id="surveyInfo"> <div><script src="http://www.surveymonkey.com/jsEmbed.aspx?sm=wtvL1HViBjWad5DOwtqu7A_3d_3d"> </script>
</div>
<ul class='nav'>
<li class='first'>
<a href='what-is-qfo.html' title='What Is QFO?'>What Is QFO?</a>
</li>
<li>
<a href='team.html' title='Team'>Team</a>
</li>
<li>
<a href='examples.html' title='Examples'>Examples</a>
</li>
<li>
<a href='technology.html' title='Technology'>Technology</a>
</li>
<li class='last'>
<a href='mailto:info#franwell.com' title='Contact'>Contact</a>
</li>
</ul>
<a class='login' href='qfo.aspx.html' title='Login'>Login</a>
<div id='main'>
<p>
<img src='images/summary.png' alt="Summary of QfO Process" />
</p>
</div>
Copyright © 2011 Hussmann Corporation and Franwell, Inc.
</div>
</body>
</html>
You can set the width of the autogenerated iframe. This will force the SurveyMonkey iFrame to be smaller.
http://jsfiddle.net/H6WNP/
iframe { width: 250px !important; }
I just gave you a generic answer because your post is missing a lot of html that corresponds to your CSS. I think this is what you are after though.