I am trying to get a simple Dragula implementation but it is refusing to work. My code:
<head>
<link href='drag3.css' rel='stylesheet' type='text/css' />
<link href='css/dragula.css' rel='stylesheet' type='text/css' />
<script src='drag3.js'></script>
</head>
<div class="container">
<h1>Drag & Drop</h1>
<p>Trying out <code>dragula.js</code>. Source here.</p>
<div class="left">
<div id="drag-elements">
<div>Element 1</div>
<div>Element 2</div>
<div>Element 3</div>
</div>
<div id="drop-target">
</div>
</div>
<div class="right">
<div id="display">Display</div>
</div>
</div>
<script src='js/dragula.js'></script>
<script src='js/example.min.js'></script>
Not sure what I am doing wrong, any help would be gratefully received!
The live code is here:
Dragula Implementation
OK so I fixed it by simply moving the
<script src='drag3.js'></script>
to the end of the page.
Indeed :
There's a caveat to dragula. You shouldn't include it in the head of your web applications. It's bad practice to place scripts in the head, and as such dragula makes no effort to support this use case.
Place dragula in the body, instead.
...according to https://github.com/bevacqua/dragula
Related
I am new to html and css. I was trying to create a test Image Gallery to check how fancy box works. I followed all the instructions from youtube and other sites but still I am not able to get the thing to work.
All the required files were loaded.
I apologise for what most may feel is a really simple question. But this is my first attempt so please bear with me.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="test.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</head>
<body>
<div id="container">
<div id="title">Gallery </div>
<div class="gallery">
<ul>
<li><a class="fancybox" rel="group" href="Images/Gallery/ls/image1"><img src="Images/Gallery/ts/image1"></a></li>
<li><a class="fancybox" rel="group" href="Images/Gallery/ls/image4"><img src="Images/Gallery/ts/image4"></a></li>
</ul>
<ul>
<li><a class="fancybox" rel="group" href="Images/Gallery/ls/image6"><img src="Images/Gallery/ts/image6"></a></li>
<li><a class="fancybox" rel="group" href="Images/Gallery/ls/image8"><img src="Images/Gallery/ts/image8"></a></li>
</ul>
</div>
<div id="footer">footer text</div>
</div>
</body>
</html>
I am developing a sample ios app with phonegap for learning purpose. Following is the code that I have used
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<title>Hello World</title>
</head>
<body>
<div data-role="page" id="main-page">
<h1>Apache Cordova</h1>
<div data-role="content">
<div data-role="fieldcontain">
<label for="textinput1">
Title
</label>
<input name="" id="textinput1" placeholder="" value="" type="text">
</div>
<a id="share" data-role="button" data-inline="true" data-theme="a" href="#">
Button
</a>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<!--<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>-->
<script type="text/javascript">
app.initialize();
</script>
</body>
Now the problem is, while running the application the button is not displaying properly.Please help me out??!!
This line
<!--<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>-->
Must be uncommented.
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
Because jQuery Mobile needs jQuery. Also, you need to add it before jQuery Mobile's JS file, like this :
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
Hope this helps.
Till now I am developed an app with jquery mobile in phonegap.
It has multiple views/pages.
how to load multiple pages using jQuery mobile
The following snippets show how you can load different page:
Go to Page2 <!-- for page2 in same html -->
Go to Page2 <!-- redirect to different html -->
or
$.mobile.changePage("#page2"); // for page2 in same html
$.mobile.changePage("page2.html"); // to go to different html file
I have a sample Android Phonegap application in Github which contains two html files with two pages and shows connects them together.
Although it is using Android but the /www file structure will remain same for iOS XCode project also. So you can copy the folder and run it same in xcode. I have tested the setup on XCode with Cordova 1.7.1.
you should add all javascripts and css files in the first page that is loaded first;;
ex: my app the first page is index.html;
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="css/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" href="css/jqm-docs.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.datebox.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.scrollview.css" />
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
<!--
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
</head>
<body>
<div data-role="page" id="indexPage" >
<div data-role="header">
<a href="#" id="btnExit" data-role="button" data-inline="true" data-icon="back" >Exit</a>
<h1>Sample App</h1>
</div>
<div data-role="content">
</div>
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/cordova-1.7.0rc1.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
</script>
<script type="text/javascript" src="controllers/firstpage.js" ></script>
<script type="text/javascript" src="controllers/secondpage.js" ></script>
</body>
</html>
and fisrtpage should like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div data-role="page" id="firstpage" >
<div data-role="header" data-inline="true">
<a href="#" data-role="button" data-inline="true" id="btnLogOut" data-icon="back" >Log out</a>
</div>
<div data-role="content" data-content-theme="a" style="width:97%;">
the first page
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul style='background-color:#313439'>
</ul>
</div>
</div>
</div>
</body>
</html>
And firstpage.cs
$( document ).delegate("#firstpage" ,"pageinit", function() {
/// add your code here
});
I wanted to make a facebook app with an image which has 2 buttons and under the image there would be a video from youtube. But since coding is new to me I need your help. I tried different codes but none of them worked. the video is not appearing at all.
And heres the final code I came up with:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com /2008/fbml">
<script type="text/javascript">
function framesetsize(w,h){
var obj = new Object;
obj.width=w;
obj.height=h;
FB.Canvas.setSize(obj);
}
</script>
</head>
<body onload="framesetsize(520,3300)"> <!--specify the height and width for resize-->
<div id="fb-root">
<div align="center"><img src="http://fb.joma-sport.hu/jomafiuk4.jpg" width="520" height="390" border="0" usemap="#Map" /></p>
<map name="Map" id="Map">
<area shape="rect" coords="133,74,246,335" href="2.htm" target="_self" alt="Total fit" />
<area shape="rect" coords="248,43,414,339" href="3.htm" target="_self" alt="Aluminio" />
</map></div>
</div>
<iframe title="YouTube video player" width="650" height="390" src="http://www.youtube.com/watch?v=wUaxZLJ0-28" frameborder="0" allowfullscreen></iframe>
</div
</div>
<!--this div is required by the Javascript SDK--><script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>
<body>
</body>
</html>
Any help would be appreciated!!!!
12minutes later.....BAAAAAH got the answer..Thanks anyway.. :)
The solution:
On youtube click the Share button (which is under your video), than click the Embed button. After that you'll get the code which you write in your HTML. I also checked Use old embed code, and I used that code in my HTML. Sorry if this wasn't clear. My first language is not English..but I hope I could help/
This is my website for mobiles to visit : m.looa.com
If you got an Iphone,please visit it and you will find that the words don't break line .
This only happens in Iphone's browser, it looks fine for android and almost all browsers for PC,including
IE Chrome FireFox and even Safari(you can try that).
I know this must have something to do with CSS but I can't figure out where the problem lies .
Below is the code from my webpage,please pay attention to the class : middigest,I think that probably is where the problem lies(I have delete some code to make it more clear):
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='theme/mobile/img/style.css' type='text/css' media='all' />
</head>
<body onload='setPage(160)'>
<div class='allbox'>
<dl class='alltop'>
<dt class='w2' onclick="window.location.href='http://m.looa.com/g_m_city'"><a>北京</a></dt>
<dd><a href='http://m.looa.com/mobile'><img src='theme/mobile/img/looa_logo.png'/></a></dd>
<dt class='w3' onclick="window.location.href='http://m.looa.com/g_m_cang'"><a>收藏夹</a></dt>
</dl>
<dl class='topmid'>
<dt><img src='theme/mobile/img/looa_nearby_s.gif' /></dt>
<dd onclick= 'getCityDis()'><a> <img src='theme/mobile/img/looa_dis.gif'/></a></dd>
</dl>
<div class='midbox' id='midbox'>
<dl class='midmenu'>
<dt>距离<strong> 0.0km</strong></dt>
<dd>商家<strong> 纯视觉摄影工作室</strong></dd>
</dl>
<div class='middigest'>
<a href='http://m.looa.com/g_m_detail?deal_id=6921'>性感翘臀，迷人水腰，诱人S曲线，这一站就是你</a> <----------- this line
</div>
<dl class='midpic'>
<dt><a href='http://m.looa.com/g_m_detail?deal_id=6921'><img width='175px' height='129px' src='http://www.looa.com/theme/tuan/outsite_deal_img/201010/1287700044_small.jpg'/></a></dt>
<dd>
<ul>
<li>现价</li>
<li style='margin-bottom:6px;'><span><strong class='numfont'>3</strong>元</span></li>
<li>原价 264元</li>
<li>购买 1人</li>
<li>网站 <a href='#' onclick='gotoOutSite("http://www.groupon.cn/html/product/FS/FS4446.html")'>团宝网</a></li>
<li>剩余 6天9小时</li>
</ul>
</dd>
</dl>
<dl class='midbot'>
<dt><a href='http://m.looa.com/m_map?deal_id=6921'><img src='theme/mobile/img/looa_map.gif' /></a></dt>
<dt><img id='cangbtn6921' src='theme/mobile/img/looa_no_cang.gif' onclick="toggleDealCangState('cang',6921,60)" /></dt>
<dt><img src='theme/mobile/img/no_phone.gif' /> </dt>
</dl>
</div>
************* Repeat *****************
</div>
</body>
</html>
and the CSS related is :
.middigest {word-break:normal;float:left;width:98%;line-height:17px;font-weight:bold;padding:6px 0 8px 0;clear:both;margin:0 1%;}
also,if you want to see the whole CSS,please go to http://m.looa.com/theme/mobile/img/style.css
Anyone of you has the experience of web developing
for Iphone ? Give me a hand please.
Thanks so much !!!
I don't have an iphone so I can't test it but did you try those CSS properties?
White-space
Word-wrap
Overflow: hidden