I am trying to implement JQueryUI resizable. It's not working below is my tentative demo which I will implement later in actual code. Please help me to solve it. It's not working.
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-helper { border: 1px dotted gray; }
</style>
<script>
$(function() {
//var a = $("#resizable").html();
//alert(a);
$("#resizable").resizable();
});
</script>
</head>
<body>
<div id="demo-frame">
<meta charset="utf-8">
<div class="demo">
<div class="ui-widget-content ui-resizable" id="resizable">
<h3 class="ui-widget-header">Resizable</h3>
<div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1000;"></div>
</div>
</div>
</div>
</body>
It's the divs you have inside of your div that seem to be causing an issue. I commented them on on this jsFiddle http://jsfiddle.net/ta9N4/ and it appears to be working fine.
The method resizable() comes from jQuery UI API.
And you didn't include jQueryUI in your html page.
Go here to download it (or grab a link to this file), and include it like you did for jQuery (<script> tag).
Related
Hey i made a layout for a website in a file.html
I got it working, but when i changed the file to a .php, non of the css code i have made worked.
Body {
margin: 0px;
background-color: rgba(230, 230, 230, 1);
font-size: 100%;
}
header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
background-color: RGBA(66, 161, 244, 1);
}
header{
height:10%;
}
footer{
height:2%;
text-align: center;
}
#Logo{
position: relative;
width: 50%;
background-color: black;
display: inline-block;
height:100%;
}
#Search{
float: right;
position: relative;
width: 20%;
height: 50%;
display: inline-block;
margin: 0px;
}
.Search{
width: 80%;
height: 100%;
}
.SearchButton{
float: right;
width: 19%;
height: 100%;
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
<html>
<head>
<title>Unnamed Project</title>
<link rel="stylesheet" type="text/css" href="Forside.css">
<link rel="stylesheet" type="text/css" href="Standart.css">
<meta charset="utf-8">
</head>
<body>
<header>
<img src="Icon.png" id="Logo" href="Forside.php"></img>
<form action="Forside.php" id="search" method="post">
<input type="text" name="Parameters" class="Search"></input>
<input type="submit" value="Søg" class="SearchButton"></input>
</form>
</header>
<nav>
<ul>
<li><a>Katagorier</a></li>
</ul>
</nav>
<article>
<div id='Produkt2'>
<div id='Navn'>
$row[Navn]
</div>
<div id='Produktnr'>
$row[AutoID]
</div>
<div id='Billedpris'>
<div id='Billed'>
<img src='Billeder/$row[Billed]'></img>
</div>
<div id='Pris'>
<a class='pris'>$row[Pris],-</a>
<div id='Kurv'>
<form action='PutiKurv.php' method='post'>
<input type='hidden' name='antal' value='1'>
<input type='hidden' name='ProduktID' value='$row[AutoID]'>
<input type='submit' value='Læg i kurv:'></input>
</form>
</div>
</div>
</div>
<div id='Info'>
$row[Info]
<div id='mere'>
<form action='$row[Hjemmeside]'>
<input type='submit' value='Mere info'></input>
</form>
</div>
</div>
<hr>
</div>"
</article>
<footer>Copyright © W3Schools.com</footer>
</body>
</html>
It should look like this, but when i load the css is gone.
please help
The problem is a caching issue. CSS can be a little strange with caching, and while the classic combination CTRL + F5 works for images, it doesn't work for CSS. The better solution to dealing with caching in CSS is to hold down SHIFT while clicking on the refresh symbol.
Obviously, you can include a backslash in the filepath for the CSS reference, or append a version number, such as: <link rel="stylesheet" type="text/css" href="style.css?v2 />.
This version number doesn't 'mean' anything inherently, but can be useful for denoting updates to the CSS, and importantly will be considered a different file by the browser (forcing it to re-load the CSS).
You can also force the browser to refresh the CSS automatically every time the page is loaded with PHP, by appending a timestamp within the link to the CSS file, with something like:
<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />
Keep in mind that CSS can be 'costly', so once you have finished development, you probably want to allow visitors to cache by removing the timestamp in a production environment :)
Hope this helps! :)
When a string is specified in double quotes or with heredoc, variables are parsed within it.
You are using single quotes instead of double quotes. Use double quotes if you want the variables to be parsed.
In here: <form action='$row[Hjemmeside]'> which means variable parsing is not working. Change to <form action="<?php echo $row[Hjemmeside]; ?>">
Also in here: <input type='hidden' name='ProduktID' value='$row[AutoID]'>. Change to: <input type='hidden' name='ProduktID' value="<?php echo $row[AutoID]; ?>">
And here: <img src='Billeder/$row[Billed]'></img>. Change to: <img src="Billeder/<?php echo $row[Billed]; ?>"></img>
Also, you can go to the Developer mode in your web browser and do the "Empty cache and hard reload" option to load the new style files. Consider using file versioning. For example:
<link rel="stylesheet" type="text/css" href="Forside.css?v=1.1">
<link rel="stylesheet" type="text/css" href="Standart.css?v=1.1">
I have a bunch of PHP forms which is working perfect. I am working on Integrating all the forms into a single HTML page so that on the click it opens the form in the same HTML page. I am new to HTML5 and took some HTML file and modified it.
I am facing two issues.
1. On click of the options in top of the form(from drop-down) it opens the page in the new tab. I need to open it in the center of the HTML page.
2. I need to create in-line drop-down boxes, the second drop-down menu is not showing up correctly.
It may be trivial or I am doing something completely wrong?
Experts, please tell me what I am missing..
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>DG SIM</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
<link rel="stylesheet" href="/ASSIM/css/bootstrap.min.css">
<script src="/ASSIM/jquery-1.11.3.min.js"></script>
<script src="/ASSIM/js/bootstrap.min.js"></script>
<style type="text/css">
.x-panel-framed {
padding: 0;
}
#div_g2 {
background-color: #FFFFFF;
margin: 10 10 10 10;
}
button#inner {
color: #FFF;
background-color: #3498DB;
border-radius: 10px;
margin: 0px 10px 10px 0px;
font-weight: bold;
font-size: 110%;
width: 100%;
text-transform: uppercase;
}
.dropdown-menu form :focus{
color:black;
background-color: none;
}
.buttonWidth {
width: 160px
}
</style>
<script type="text/javascript">
$(function() {
pageLoaded();
});
function pageLoaded() {
//need to call a php script here too so that it shows up on the cneter page.
}
Code:
</script>
</head>
<body style="background-color:#0067AC;">
<div align="center"><img src="img/aff_new.gif" /><img src="img/corp_id_small.gif" /></div>
<!-- Device options-->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle buttonWidth" type="button" data-toggle="dropdown">Device Options
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Onboarding Devices</li>
<li><a target="div_g2" href="/ASSIM/trialdeviceActions.php">Device Actions</a</li>
</ul>
</div>
<!-- DATA Option
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle buttonWidth" type="button" data-toggle="dropdown">SCEF Options
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a target="div_g2" href="/ASSIM/addSF.php">ADD SCEF</a>
<li><a target="div_g2" href="/ASSIM/trial.html">Delete SCEF</a>
</li>
</ul>
</div>
</div>
-->
<div style="background-color:#0067AC; position: absolute; left: 10px; right: 10px; top: 95px; bottom: 10px;" > <div>
<div id='div_g2' style='height:500px; top: 30px;'></div>
</div>
</body>
</html>
I want to add id to cloned img tag as I want to store the data of cloned object to database. can anyone help please..I also want to store the x and y positions provide by the user using javascript..I just want to know how to assign different id's to the cloned img tag.
Here is my code.
<html>
<head>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" >
google.load("jquery", "1.6.3");
google.load("jqueryui", "1.8.16");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script src="dragndrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="include/jquery-ui.css">
<script src="include/jquery-1.10.2.js"></script>
<script src="include/jquery-ui.js"></script>
<style type="text/css">
.col{
float:left;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
}
#col1{
width:200px;
height:500px;
border:1px solid black;
}
.drag{
width:100px;
border:1px solid black;
height:40px;
position:relative;
background-color:red;
background-image:url(restaurant/8793_532242100147879_270911928_n.jpg);
}
#droppable{
width:500px;
height :500px;
border:1px solid black;
}
</style>
</head>
<body>
<div id="wrapper">
<div class = "col" id="col1">
<img src="" id="drag1" class="drag">
</div>
<div class="col" id ="droppable">
</div>
</div>
</body>
</html>
here is dragndrop.js file.
// JavaScript Document
$(document).ready(function () {
var x = null;
//Make element draggable
$(".drag").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit'
});
$("#droppable").droppable({
drop: function(e, ui) {
x = ui.helper.clone();
x.draggable({
helper: 'original',
containment: '#droppable',
tolerance: 'fit'
});
x.appendTo('#droppable');
ui.helper.remove();
}
});
});
I have been learning to use a slideshow code I saw on a website somewhere. Although I have managed to get it working with the images showing well, but I can't figure out how to show the image name in another table alongside the images when the slide changes.
I have provided the code here. so I need your help. What I'm looking for s that whenever the slideshow changes with another picture, I want the picture name displayed next to it.
Thanks for your asisstance.
Update - Here's the updated code based on Gilly3's suggestion, but I'm still confused on how to get the name displayed
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>JQuery Cycle Plugin - Pager Demo with Prev/Next Controls</title>
<link rel="stylesheet" type="text/css" media="screen" href="../jq.css" />
<link rel="stylesheet" type="text/css" media="screen" href="cycle.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<style type="text/css">
#main { margin: 20px }
#nav { margin: 10px; position: relative }
#nav li { float: left; list-style: none}
#nav a { margin: 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fc0; text-decoration: none }
#nav li.activeSlide a { background: #faa; color: black }
#nav a:focus { outline: none; }
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#slideshow').cycle({
prev: '.prev', // Setup prev links
next: '.next', // Setup next links
pager: '.nav', // Setup pager navs
before: function () {
$("#name").text(this.alt);
}
});
});
</script>
<style type="text/css">
#left, #slideshow, #right { float: left; width: 200px; }
</style>
</head>
<body>
<!-- left nav bar -->
<div id="left">
<span class="prev">Prev</span>
<span class="next">Next</span>
<ul class="nav"></ul>
</div>
<!-- slideshow -->
<div id="slideshow">
<?php
mysql_connect("localhost", "root", "")or die("cannot connect");
mysql_select_db($db_name)or die("cannot select DB");
$data = mysql_query("SELECT * FROM people") or die(mysql_error());
while($info = mysql_fetch_array( $data )){
echo "<img src=\"http://localhost:8080/about/images/".$info['photo'] . "\" alt=\"".$info['name'] ."\"/>";
}
?>
</div>
<div id="name">
HELP ME PRINT THE NAME HERE
</div>
<!-- right nav bar -->
<div id="right">
<span class="prev">Prev</span>
<span class="next">Next</span>
<ul class="nav"></ul>
</div>
</div>
</body>
</html>
Use either of the before or after events, depending on when you want the name to change.
$('#slideshow').cycle({
prev: '.prev',
next: '.next',
pager: '.nav',
before: function () {
$("#name").text(this.alt);
}
});
You'll need to populate alt with the name in your php. If you don't want to add a tooltip, also add title="".
echo "<img src=\"http://localhost:8080/people/uploads/".$info['pic'] . "\" alt=\"".$info['name'] . "\" title=\"\" />";
Here is what I think should work:
Add a 'data-name' attribute to each image. Something like:
echo "<img src='http://localhost:8080/people/uploads/".$info['pic']."' data-name='".$info['name']."'/>";
In the jquery.cycle plugin set an option for the 'onPrevNextEvent'. Probably something like:
$('#slideshow').cycle({
prev: '.prev',
next: '.next',
pager: '.nav',
onPrevNextEvent: function(isNext, zeroBasedSlideIndex, slideElement){
var name = slideElement.data('name');
$("#name").html(name);
}
});
Hope that helps.
Bob
I have this script
say index.html
<html>
<head>
<title>Ajax with jQuery Example</title>
<script type="text/JavaScript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setInterval(function(){
$("#quote p").load("script.php");
}, 10000);
});</script>
<style type="text/css">
#wrapper {
width: 240px;
height: 80px;
margin: auto;
padding: 10px;
margin-top: 10px;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="quote"><p> </p></div>
</div>
</body>
</html>
script.php
<?php
echo "Hello how are you";?>
when loading index.html it is blank for 10 seconds and then it start functioning..how do I get rid of blank and how it can show instantly when browser loads??
Your setInterval() call works as designed: It says "in 10 seconds and then every seconds, do this...."
Add a separate "load" call to do the initial filling:
$(document).ready(function(){
$("#quote p").load("script.php"); // <--- Add this
setInterval(function(){
....