I am trying to display additional content, but my code is not working. I cannot seem to find anything wrong in the code, help is greatly appreciated. Thank you.
<head>
<style>
#more { display: none; }
</style>
</head>
<body>
<p>Content</P>
<span id="more">
<p>Content</p>
</span><span id="more">
<span id="more">
<p>Content</p>
</span><span id="more">
<span id="more">
<p>Content</p>
</span><span id="more">
...
Load More
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function(){
$("#more").slice(0, 2).show();
$("#load").click(function(e){
e.preventDefault();
$("#more:hidden").slice(0, 2).show();
if($("#more:hidden").length == 0){
alert("No more");
}
});
});
</script>
</body>
</html>
Hints for your approach:
You have different mistakes in your code:
You have more than one id="more".
You try to use an opening <span> tag but you don't use the closing part </span>.
Here is a small working example similar to your code but it is not the best solution for your problem.
I changed html id to class to query more than one <span> element
$(function(){
var nextMore = 0;
$("#load").click(function(e){
e.preventDefault();
$(".more").slice(nextMore, nextMore + 1 ).show();
nextMore += 1;
if($(".more").length - nextMore == 0){
alert("No more");
}
});
});
.more { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<p>Content</p>
<span class="more">
<p>Content</p>
</span>
<span class="more">
<p>Content</p>
</span>
<span class="more">
<p>Content</p>
</span>
Load More
(More) appropriate Approach:
As mentioned by other commentators, I guess you try to do something like this to add/ append more html elements (e.g. buttons) to your html document:
$(document).ready(function(){
$("#btn").click(function(){
$("ol").append("<li>Content</li>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<ol>
<li>Content</li>
</ol>
<button id="btn">Append Content items</button>
Related
is there anyone that can just write down the basics for database knowledge? i want to link a database to my html page but have no knowledge about it
this is my html page and i want the div background linked to a databse value that when the value is true the background is green if false background is red, now it works with a button input that if pressed it change to the opposite color
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/style.default.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Grafiek</title>
</head>
<body>
<h1>Server Stats</h1>
<div id="maindiv">
<div id="server1" class="serverstatus">
<div id="cardheader">
(servername1)
</div>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
<div id="server2" class="serverstatus">
<div id="cardheader">
(servername2)
</div>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
<div id="server3" class="serverstatus">
<div id="cardheader">
(servername3)
</div>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
</div>
</body>
</html>
<script>
function toggleStatus(e) {
var parentDiv = e.parentNode.parentNode;
var bgColor = parentDiv.style.backgroundColor;
if (bgColor == "darkred") {
parentDiv.style.backgroundColor = "green";
} else {
parentDiv.style.backgroundColor = "darkred";
}
}
// var green = false
// function toggleStatus()
// {
// if (green = !green)
// {
// $("#maindiv .serverstatus").each(function ()
// {
// $(this).css("background-color", "red");
// });
// }
// else
// {
// $("#maindiv .serverstatus").each(function ()
// {
// $(this).css("background-color", "#639919");
// });
// }
// };
// function updateStatus(){
// $("#maindiv .serverstatus").each(function(){
// $(this).css("background-color", "red");
// });
// }
//
// $( document ).ready(function() {
// updateStatus();
// });
</script>
</body>
</html>
<script type="text/javascript">
//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
var olditemclicked = null;
$("#firstpane p.menu_head").click(function()
{
if(olditemclicked !== null){
olditemclicked.css({backgroundImage:"url(./javascript/modules/baseModule/theme/standard/img/left.png)"});
}
$(this).css({backgroundImage:"url(./javascript/modules/baseModule/theme/standard/img/down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
olditemclicked = $(this);
});
</script>
<div id="firstpane" class="menu_list"> <!--Code for menu starts here-->
<p class="menu_head_home" style="border-top-left-radius:2px;"><span class="home_disp">Home</span></p>
<p class="menu_head" style="border-top-left-radius:2px;">System</p>
<div class="menu_body">
Providers
Zones
Image Repository
</div>
<p class="menu_head">Service</p>
<div class="menu_body" style="display:block">
Instances
Service Group
</div>
<% if(isAccessValid('UsersManagement')) { %>
<p class="menu_head">User Management</p>
<div class="menu_body">
User
</div>
<% } %>
<p class="menu_head">Monitoring</p>
<div class="menu_body">
Alarms
Threshold
</div>
<!-- <p class="menu_head">MAINTENANCE</p>
<div class="menu_body">
Logs
Migration
</div> -->
<p class="menu_head">Settings</p>
<div class="menu_body">
Platform Settings
Application Settings
</div>
</div>
Please let me get an answer?
It looks like you haven't wrapped any of the code that references the DOM (e.g. $("#firstpane p.menu_head")) within a $(document).ready... Try wrapping it within the following and see whether you have more success.
<script type="text/javascript">
$(document).ready(function() {
// Code referencing DOM here
});
</script>
head no background and color black ,on mouseover its color will be white and background black ,its working fine but
onmouse over on content i want to change the color of head?
how?
Is it possible only using css?
<ul id="meg">
<li>head
<div>
<h2>su head</h2>
<p>content</p>
<p>content</p>
</div>
</li>
<li>head
<div>
<h2>su head</h2>
<p>content</p>
<p>content</p>
</div>
</li>
</ul>
You can do it with JavaScript. Though I'm not entirely clear on what you wanted, I gave it a shot:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function stuff(){
var k = document.getElementsByTagName('li');
for (var i = 0; i < k.length; i++) {
var s = k[i];
s.firstChild.style.color = 'white';
s.firstChild.style.backgroundColor= 'black';
}
}
</script>
</head>
<body>
<ul id="meg">
<li>
head
<div>
<h2>su head</h2>
<p>content</p>
</div>
</li>
</ul>
</body>
</html>
this might work. i've knows css to be able to affect elemnts after the closing tag not before,so this is areverse of the "+" used to do that.
<style type="text/css">
#content:hover - #head { background-color: black; color: white; }
</style>
<ul id="meg">
<div id="head">
<li>head
</div>
<div id="content">
<h2>su head</h2>
<p>content</p>
<p>content</p>
</div>
</li>
</ul>
Have you tried #meg li a:hover { background-color:#000;color:#FFF; }
I have called 2nd page <div id=child> on button click of 1st page <div id = home> and used jquery theme in both pages but the problem is in 2nd page there is no theme effect as in 1st page. I have put the css file in same folder and it is giving effect in 1st page and not in 2nd ?
Can any one solve the problem, so that the theme have effect in 2nd page also? Below is my code
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="jquerybasic/jquerymobilecss.css" />
<style>
/* App custom styles */
</style>
<script src="jquerybasic/jquery.min.js" type="text/javascript">
</script>
<script src="jquerybasic/jquery.mobile-1.1.0.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#buttonid').click(function() {
$('#child').toggle();
$('#home').toggle();
});
$('#buttonchild').click(function() {
$('#child').toggle();
$('#home').toggle();
});
$('#next').click(function() {
$('#home').show();
$('#child').hide();
});
$('#prev').click(function() {
$('#home').hide();
$('#child').show();
});
$('#nextchild').click(function() {
$('#home').show();
$('#child').hide();
});
$('#prevchild').click(function() {
$('#home').hide();
$('#child').show();
});
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-theme="d" data-role="header">
<h3>
The Grand Bhagavati
</h3>
<a data-role="button" id="next" data-inline="true" data-transition="slide" >
<<
</a>
<a data-role="button" id="prev" data-inline="true" data-transition="fade" >
>>
</a>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="textinput1">
User:
</label>
<input id="textinput1" type="text" />
</fieldset>
</div>
<input id="buttonid" data-theme="d" value="Login" type="button" />
</div>
<div data-theme="d" data-role="footer" data-position="fixed" >
<h3>
Page 1
</h3>
</div>
</div>
<div data-role="page" id="child">
<div data-theme="d" data-role="header">
<h3>
The Grand Bhagavati
</h3>
<a data-role="button" id="nextchild" data-inline="true" data-direction="reverse" data-transition="slide" >
<<
</a>
<a data-role="button" id="prevchild" data-inline="true" data-direction="reverse" data-transition="fade" >
>>
</a>
</div>
<div data-role="content">
<label>
hi khushbu. welcome...!
</label>
<input id="buttonchild" data-theme="d" value="Login" type="button" class="ui-btn-hidden" aria-disabled="false" />
</div>
<div data-theme="d" data-role="footer" data-position="fixed" >
<h3>
Page 2
</h3>
</div>
</div>
<script>
//App custom javascript
</script>
</body>
Ok boy :)
It seems you've skipped a rather important part of using a new piece of software, reading the documentation.
To navigate between pages you would just place this in the href attribute for the link:
<a data-role="button" href="#child">...</a>
And jQuery Mobile will handle the transition to the next pseudo-page. Here is the documentation for Linking Pages: http://jquerymobile.com/demos/1.1.0/docs/pages/page-links.html
If you want to do this programatically then you can use $.mobile.changePage() which is what gets used internally. The advantage to manually calling this function (say in a click event handler for a button) is that you can specify non-default options for the transition:
$('#next').on('click', function () {
$.mobile.changePage($('#child'), { transition : 'slide', reverse : true });
});
Here is the documentation for $.mobile.changePage(): http://jquerymobile.com/demos/1.1.0/docs/api/methods.html
If you wanted to roll your own transitions it's quite a bit more complex than showing one div and hiding another. You've got to setup some CSS classes that animate the transition using CSS3 (transform, transition, keyframes, etc.).
And finally, here is a demo of your code where I replaced the links in the header with a single link that works: http://jsfiddle.net/MmKK4/
I have created a sample web application using jQuery Mobile.
I have created two <div>s; one contains href and another contains the content. When I click on HREF It showing jquery-mobile script Error as like below:
Error Loading Page
Can anybody see what might be causing this error?
<html> <head runat="server"> <title>How to expand collapse div layer using jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-.0a3.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-.0a3.min.css" />
<script language="javascript">
$(document).ready(function () {
var $pages = $('#pages > *').hide();
$('#content a').click(function() {
$pages.hide();
$($(this).attr('href') ).show();
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" class='header_align'>Bristol-Myers Squibb</div>
<h2>
How to expand collapse div layer using jQuery</h2>
<div id="toggle">
<div id="heading">Heading</div>
<div id="content">
<ul>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</div>
</div>
<div id="pages">
<div id="page-1">Page 1 Content</div>
<div id="page-2">Page 2 Content</div>
<div id="page-3">Page 3 Content</div>
</div>
</div>
</body>
</html>
The jQuery mobile default behavior of a link with a named anchor is to jump to a page (data-role="page") with the respective id. But there is no such page for page-1, page-2 or page-3 so the error occurs.
Try this
$(document).ready(function () {
var $pages = $('#pages > *').hide();
$('#content a').click(function() {
$pages.hide();
$($(this).attr('href') ).show();
return false;
});
});