Bit of an odd one.... How can I get a website to *random*ly select a division to show each time the page is loaded? I have absolutely no idea where to start.
<body>
<div id="option1">Dog</div>
<div id="option2">Cat</div>
<div id="option3">Rabbit</div>
</body>
Thanks!!
I would recommend doing something in Javascript.
When the body load you should tell Javascript either to remove the once you dont want or to create the one you want.
Update:
This will delete all divs but the one selected randomly.
Html
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="load()">
<div id="1">
</div>
<div id="2">
</div>
<div id="3">
</div>
</body>
Javascript
function load() {
var amount_of_divs = 3;
var random = Math.floor((Math.random()*amount_of_divs) + 1);
for (var i = 1; i < amount_of_divs + 1; i++) {
if(i == random)
continue;
var div = document.getElementById(i);
div.parentNode.removeChild(div);
}
}
Related
I am using ajax to auto refresh a div tag using this code in my index.php file:
<script type="text/javascript">
$(document).ready(function() {
$.ajaxSetup({ cache: false });
setInterval(function() {
$('#messanges').load('messanges.php');
}, 1000);
});
</script>
<div id="messanges"></div>
<textarea name="chat_input" id="chat_input"></textarea>
In messanges.php I have a auto scroll down code.
Cause I want it to start at the bottom when entering the chat.
<head>
<script>
var chat_height = $('#chat').outerHeight();
$('#chat_box').scrollTop(chat_height);
</script>
</head>
<div id="chat_box" style="height:700px; overflow:auto">
<div id="chat">
<div id="Name">Test user:</div>
<div id="img"><img src="picture.png" /></img></div>
<p class="triangle-isosceles left">
"Test" </p>
</div>
The code is now forcing the scroll to stay at the bottom because of the ajax auto refresh.
How can I make it auto refresh, but if I want to scroll up it will not force me down when it refresh?
try some like this
<head>
<script>
var chat_height = $('#chat').outerHeight();
if($('.doScroll').is(':checked'))
{
$('#chat_box').scrollTop(chat_height);
}
</script>
</head>
<input type="checkbox" class="doScroll" checked />
<div id="chat_box" style="height:700px; overflow:auto">
<div id="chat">
<div id="Name">Test user:</div>
<div id="img"><img src="picture.png" /></img></div>
<p class="triangle-isosceles left">"Test" </p>
</div>
I'm developing a phonegap app with the help of JQuery mobile that has four sections, each one has its own html file. The problem is, for instance, if I first load main.html and then navigate to list.html through a link, the listview in list.html does not show anything, but if I load list.html as the first page, it works perfect, I found this problem while testing on devices. Hope someone can help me fix this
Got this files as an example
--------clasificados.html--------------
<!DOCTYPE HTML>
<head>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css"/>
<link href="css/custom.css" rel="stylesheet" type="text/css"/>
<script src="cordova-2.6.0.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
</head>
<html>
<body>
<div data-role="page" id="clasificados">
<div data-role="header" data-position="fixed" data-id="header1" data-tap-toggle="false">
<h1>Clasificados</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview">
<li data-icon="arrow-r">Vehiculos</li>
<li data-icon="arrow-r">Bienes Raices</li>
<li data-icon="arrow-r">Empleos</li>
<li data-icon="arrow-r">Diversos</li>
</ul>
</div>
<div data-role="footer" class="nav-glyphish-example" data-position="fixed" data-id="footer1" data-tap-toggle="false">
<div data-role="navbar" class="nav-glyphish-example">
<ul>
<li><br/>Periodico</li>
<li><br/>Directorio</li>
<li><br/>Clasificados</li>
<li><br/>Cuponera</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
-------vehiculos.html-------------
<div data-role="page" id="vehiculos" data-add-back-btn="true">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>Vehiculos</h1>
</div>
<div data-role="content">
<ul id='vehiculosOutput' data-role="listview">
</ul>
</div>
<div data-role="footer" class="nav-glyphish-example" data-position="fixed" data-id="footer1" data-tap-toggle="false">
<div data-role="navbar" class="nav-glyphish-example">
<ul>
<li><br/>Periodico</li>
<li><br/>Directorio</li>
<li><br/>Clasificados</li>
<li><br/>Cuponera</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
-------vehiculos.js----------------
$(document).ready(function(){
$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
// retry not set or less than 2 : retry not requested
if( !originalOptions.retryMax || !originalOptions.retryMax >=200 ) return;
// no timeout was setup
if( !originalOptions.timeout >0 ) return;
if( originalOptions.retryCount ) {
// increment retry count each time
originalOptions.retryCount++;
}else{
// init the retry count if not set
originalOptions.retryCount = 1;
// copy original error callback on first time
originalOptions._error = originalOptions.error;
};
// overwrite error handler for current request
options.error = function( _jqXHR, _textStatus, _errorThrown ){
// retry max was exhausted or it is not a timeout error
if( originalOptions.retryCount >= originalOptions.retryMax || _textStatus!='timeout' ){
// call original error handler if any
if( originalOptions._error ) originalOptions._error( _jqXHR, _textStatus, _errorThrown );
return;
};
// Call AJAX again with original options
$.ajax( originalOptions);
};
});
var output = $('#vehiculosOutput')
$.ajax({
url: 'http://www.periodicosonofertas.com/mobile/conexVehiculos.php',
dataType: 'jsonp',
jsonp: 'jsoncallback',
success:
function(data, status){
$.each(data, function(i,item){
var vehicles = '<li>'+item.name + '<p></p>'
+ '<p><font style="white-space:normal; font-size: small" >'+item.descripcion+'</p>' + '<p>'+item.contacto+'</p>' + '<p>'+item.telefono+'</p>' + '<p>'+item.correo+'</p></li>';
output.append(vehicles);
});
output.listview('refresh');
},error: function( jqXHR, textStatus, errorThrown ){
// display error status on failure
alert( 'error: ' + textStatus );
}
,timeout:5000
,retryMax: 200
});
});
When using Ajax navigation, then jQM loads only the contents of the response's body element (or more specifically the data-role="page" element). The scripts and styles inside the head tag won't execute unless the page is requested via HTTP. This explains why the listview is displayed properly when the page is loaded as first page.
In conclusion there are two possible solutions to your issue:
Initially, replace $(document).ready(function(){ with $(document).on('pageinit', '#vehiculos', function(){ inside vehiculos.js. This action is required, regardless of which of the below solution you will select.
The first solution is to add the vehiculos.js script inside the main.html page's head tag:
<script src="vehiculos.js"></script>
The second solution is to include the vehiculos.js script inside the list.html page's div:
<div data-role="page" id="vehiculos" data-add-back-btn="true">
I hope this helps.
I've used a solution here (which I've fiddled here) for restricting submission of a form until all required fields are filled.
The problem is when I run on my MVC3 project, as I've observed on Firebug, it stops starting at the third line of the following block. Because of it, the solution doesn't work.
var validator = $("#myForm").validate();
var tabs = $("#tabs").tabs({
select: function(event, ui) { // Here.
// The following lines are not executed.
var valid = true;
var current = $(this).tabs("option", "selected");
var panelId = $("#tabs ul a").eq(current).attr("href");
Can somebody tell me why my project won't run the rest of the script and what I should do to fix it? Thanks!
In my View file
#ModelType SLC.Models.RegisterModel
// downloaded with NuGet
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var validator = $("#myForm").validate();
console.log(validator);
var tabs = $("#tabs").tabs({
select: function (event, ui) {
var valid = false;
var current = $(this).tabs("option", "selected");
var panelId = $("#tabs ul a").eq(current).attr("href");
$(panelId).find("input").each(function () {
console.log(valid);
if (!validator.element(this) && valid) {
valid = false;
}
});
return valid;
}
});
});
</script>
<link rel="stylesheet" href="#Url.Content("~/Content/themes/base/jquery-ui.css")" />
#Using Html.BeginForm("", "", Nothing, New With {.id = "myForm"})
#Html.ValidationSummary(True, "Account creation was unsuccessful. Please correct the errors and try again.")
#<div>
<div id="tabs">
<ul>
<li>1. Information</li>
<li>2. Information</li>
<li>3. Confirm</li>
</ul>
<div id="tab-1">
// Some fields...
</div>
<div id="tab-2">
// Some fields...
</div>
<div id="tab-3">
// Some fields...
<input type="submit" value="Register" />
</div>
</div>
</div>
End Using
In my Layout template file
<head>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
// downloaded with NuGet
<script src="#Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.10.0.js")" type="text/javascript"></script>
</head>
I found this:
The jQuery UI select method, in particular, is deprecated as of 1.10.0, so it's either back to UI 1.9.2 or a code rewrite.
I want a button to add an image to the current page on each click. For example, the first time you open the page, there is one picture. Then you click the button and the same picture appears on the page and now you have two same pictures. Then you keep on pressing on the button and more and more same pictures appear. This is the code I tried that didn't work:
<script type="text/javascript">
function addimage() {<img src="http://bricksplayground.webs.com/brick.PNG" height="50" width="100">}
</script>
</head>
<body>
<button onclick="addimage();">Click</button>
</body>
</html>
Please help! Thanks.
You should probably know that javascript can create html elements, but you cannot directly embed html inside javascript (they are two completely separate things with different grammars and keywords). So it's not valid to have a function that only contains html -- you need to create the elements you want, and then append them to the dom elements that you want them to. In this case, you create a new image and then append it to the body.
<html>
<body>
<script type="text/javascript">
function addimage() {
var img = document.createElement("img");
img.src = "http://bricksplayground.webs.com/brick.PNG";
img.height = 50;
img.width = 100;
//optionally set a css class on the image
var class_name = "foo";
img.setAttribute("class", class_name);
document.body.appendChild(img);
}
</script>
</head>
<body>
<button onclick="addimage();">Click</button>
</body>
</html>
All you're missing is a method to write the element on the page
<script type="text/javascript">
function addimage() {
document.write('<img src="http://bricksplayground.webs.com/brick.PNG" height="50" width="100">')
}
</script>
</head>
<body>
<button onclick="addimage();">Click</button>
</body>
Hi I have problem with my html helper extension method in razor view engine. I want to render SideMenu if I have any nodes to print:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
</head>
#using MyNamespace.Helpers
<body>
<div id = "page" style = "width: 90%; margin: 0 auto" class="pageSection">
<div id="logo" class="pageSection">aaaa</div>
<div id = "LeftMenuContainer">
#{ if (ViewBag.Menu.LeftMenu.Count > 0)
{
Html.RenderSideMenu((ICollection<MyNamespace.MenuNode>)(ViewBag.Menu.LeftMenu));
}
}
</div>
<div id="content" class="pageSection">#RenderBody()</div>
<div id="footer" class="pageSection"></div>
</div>
</body>
</html>
and here's my method:
public static MvcHtmlString RenderSideMenu(this HtmlHelper helper, ICollection<MenuNode> nodes)
{
string result = "<h3>Menu</h3>";
result += "<ul class=\"SideMenu\">";
foreach (var node in nodes)
result += MenuRenderEngine.RenderNode(node);
result += "</ul>";
return MvcHtmlString.Create(result);
}
The problem is that method is executed and returns well prepared string but doesn't print it in view so I'm confused what did I wrong?
Use # if you want to output the result on the page:
<div id = "LeftMenuContainer">
#if (ViewBag.Menu.LeftMenu.Count > 0)
{
#Html.RenderSideMenu((ICollection<MyNamespace.MenuNode>)(ViewBag.Menu.LeftMenu));
}
</div>
Also, as a side note, don't use ViewBag, use view models instead.