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>
Related
I like to indent <html>, <head>, <body> and the child elements (not all descendants) of <body> at the same level, at the very start of each line. Like so:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<h1>Example</h1>
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</body>
</html>
I also don't want any empty lines between <html>, <head>, and <body> tags, which is what happens by default when I run the selection formatting operation. Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<h1>Example</h1>
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</body>
</html>
How can I configure Visual Studio Code to do this automatically?
Currently I have to manually undo the extra indentations for every new HTML file. After removing them and adding one child element to <body>, it does behave like I want. But it's still quite irritating to have to do it every time.
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
How to add a notification under an input when focused ?
Like this:
(source: cjoint.com)
Is there any bootstrap plugins for this ?
Thanks,
Vincent.
There is a bootstrap plugin for it. have a look at it
<!DOCTYPE html>
<html lang="en">
<head>
<title>Notification in text nox</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
<input type ="text" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
Have a good day!!
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
});