I use this source for using different sections in a single page. The demo works fine but when I use these codes it won't work at all. here is the code :
html:
<nav>
<a class="nav" id="1" href="#">Section 1</a>
<a class="nav" id="2" href="#">Section 2</a>
<a class="nav" id="3" href="#">Section 3</a>
</nav>
<div class="section" id="1">
Section 1
</div>
<div class="section" id="2">
Section 2
</div>
<div class="section" id="3">
Section 3
</div>
css:
a {
margin: 0 10px 0 10px;
text-decoration: none;
color: black;
}
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
nav {
position: fixed;
width: 100%;
background-color: lightgrey;
text-align: center;
margin-bottom: 20px;
}
.section {
height: 100%;
padding-top: 20px;
}
js:
<script type="text/javascript">
$('.nav').click(function() {
var id = $(this).attr('id');
$('html, body').animate({
scrollTop: ($('#' + id + '.section').offset().top)
}, 1000);
});
</script>
This is exactly what i'm using but it won't work. I believe something is wrong with js codes. How can I fix that?
Thanks in advance
First make sure you've included jQuery. Then you need to write your script inside
$(document).ready(function(){
// your code goes here
});
or in short
$(function(){
//your code goes here
});
Both functions are called when the DOM is ready. Thus ensuring that event and handlers are bound properly to elements.
Check this out
Your code is working fine. You might not have included jquery library. Use this structure
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<nav>
<a class="nav" id="1" href="#">Section 1</a>
<a class="nav" id="2" href="#">Section 2</a>
<a class="nav" id="3" href="#">Section 3</a>
</nav>
<div class="section" id="1">
Section 1
</div>
<div class="section" id="2">
Section 2
</div>
<div class="section" id="3">
Section 3
</div>
<script src="jquery-2.1.3.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Related
Here is my jquery:
$(".time-block .listgroup").sortable({
connectWith: $(".time-block .listgroup"),
items: "> textarea",
placeholder: "highlight",
//helper: "clone",
update: function(event){
var changeArr= []
$(this).each(function(){
changeArr.push({
text: $(this)
.children()
.find("textarea")
.val()
})
})
// update on localstorage object and save and get on page refresh
saveEvent()
}
})
Here is what the html looks like:
<div class="container">
<!-- Timeblocks go here-->
<div class ="time-block">
<div class ="hour" id="9"> 9 AM</div>
<ul class= "listgroup">
<textarea name="" id="" cols="80" rows="5"></textarea>
</ul>
<button class ="saveBtn"><i class="fas fa-save"></i></button>
</div>
<div class ="time-block">
<div class ="hour" id="10"> 10 AM</div>
<ul class= "listgroup">
<textarea name="" id="" cols="80" rows="5"></textarea>
</ul>
<button class ="saveBtn"><i class="fas fa-save"></i></button>
</div>
I believe I put the appropriate CDNs at the bottom of the body:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-touch-punch#0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="assets/script.js"></script>
</body>
I'm a beginner trying to experiment with different functionalities and I don't really understand what is going wrong here. Appreciate the help in advance.
The jQuery UI Sortable needs to be applied to the parent element that contains the items you want sorted. I think you will get successful results when you create the container in the right place. Application test image, sample codes and references are available below:
$(function () {
$('#container').sortable({
placeholder: "ui-state-highlight",
helper: 'clone'
});
})
#container {
margin-left: 300px;
margin-top: 100px;
position: relative;
}
.newStep {
cursor: pointer;
float: right;
font-size: 10px;
margin-bottom: 0 !important;
margin-left: 0 !important;
margin-right: -12px;
margin-top: 0 !important;
padding: 3px 7px;
width: 80px !important;
}
.step {
border-top-left-radius: 0 !important;
font-family: lucida Grande;
margin: 4px;
}
.stepNumber {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
left: -20px;
padding: 10px;
position: absolute;
top: 3px;
}
.inset {
color: white;
background: none repeat scroll 0 0 #000000;
border-radius: 5px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
</head>
<body>
<div style="float:left; clear:both;" id="container">
<div style="position: relative;" class="sortable">
<span class="stepNumber inset">1</span>
<textarea placeholder="1 A.M." name="" id="" cols=100 class="step valid" style="margin-left: 10px;"></textarea>
</div>
<div style="position: relative;" class="sortable">
<span class="stepNumber inset">2</span>
<textarea placeholder="2 A.M." name="" id="" cols=100 class="step valid" style="margin-left: 10px;"></textarea>
</div>
<div style="position: relative;" class="sortable">
<span class="stepNumber inset">3</span>
<textarea placeholder="3 A.M." name="" id="" cols=100 class="step valid" style="margin-left: 10px;"></textarea>
</div>
</div>
</body>
</html>
References
jQuery Sortable Post
Consider the following based on the Demo: Sortable | jQuery UI | Include / exclude Items.
$(function() {
function toArray(sort) {
var results = [];
$("li", sort).each(function(i, el) {
if ($(el).hasClass("hour")) {
results.push({
hour: $(el).attr("id"),
details: $(el).next().find("textarea").text()
});
}
});
return results;
}
function saveEvent(string) {
//localStorage.setItem("hours", string);
console.log("Saving", string);
}
$(".time-blocks").sortable({
cancel: ".hour",
handle: ".fa-grip-lines-vertical",
update: function(event) {
saveEvent(JSON.stringify(toArray(this)));
}
});
});
.time-blocks {
list-style-type: none;
margin: 0;
padding: 0;
width: 60%;
}
.time-blocks .ui-widget-header {
padding-left: 1.5em;
}
.time-blocks textarea {
width: calc(100% - 50px);
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<div class="container">
<!-- Timeblocks go here-->
<ul class="time-blocks ui-widget">
<li class="hour" id="9">
<div class="ui-widget-header">9 AM</div>
</li>
<li class="content">
<div class="ui-widget-content">
<i class="fas fa-grip-lines-vertical"></i>
<textarea rows="5">Details 1</textarea>
<button class="saveBtn"><i class="fas fa-save"></i></button>
</div>
</li>
<li class="hour" id="10">
<div class="ui-widget">
<div class="ui-widget-header">10 AM</div>
</div>
</li>
<li class="content">
<div class="ui-widget-content">
<i class="fas fa-grip-lines-vertical"></i>
<textarea rows="5">Details 2</textarea>
<button class="saveBtn"><i class="fas fa-save"></i></button>
</div>
</li>
<li class="hour" id="11">
<div class="ui-widget">
<div class="ui-widget-header">11 AM</div>
</div>
</li>
<li class="content">
<div class="ui-widget-content">
<i class="fas fa-grip-lines-vertical"></i>
<textarea rows="5">Details 3</textarea>
<button class="saveBtn"><i class="fas fa-save"></i></button>
</div>
</li>
</ul>
</div>
You have one primary list. Each List Item has either Hours or Details. We exclude (cancel) the Hours and only worry about sorting the details into Hours.
Since this does not align well, we need a function that can combine the data. This combines the relative data so that we get an Array of Object where the Hours relate to the Details.
Sortable may not be best for this since I suspect you7 only want 1 textarea per hour. There is a chance the User may drag one into another.
The idea is that the user can either download the file by clicking download or view it as a png in browser by clicking open/show/whatever.
I used a solution found on here to achieve a show/hide toggle div function. It worked perfectly for one list item, but I'm trying to find a way to use this with a list of about 30 entries. I know I could just copy and paste the code and make new classes for the divs and anchors but surely there's a better way. I'm new to web development so I apologise if the solution is an obvious one.
Here is an example. I want each entry to control it's own div toggle (click on open).
$('.list-link').click(function() {
$('.test-div').show(500);
$('.list-link').hide(0);
$('.Hide').show(0);
});
$('.Hide').click(function() {
$('.test-div').hide(500);
$('.list-link').show(0);
$('.Hide').hide(0);
});
.list-entry {
background-color: darkgrey;
width: 200px;
margin-bottom: 10px;
list-style: none;
}
.test-div {
width: 200px;
height: 100px;
background-color: blue;
display: none;
}
.Hide {
display: none;
}
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<ul class="list">
<li class="list-entry">
<p> test 1</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</li>
<div class="test-div"></div>
<li class="list-entry">
<p> test 2</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
</li>
<div class="test-div"></div>
<li class="list-entry">
<p> test 3</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
</li>
<div class="test-div"></div>
</ul>
https://codepen.io/pen/RwgaxRQ
Thanks in advance.
To do what you require you can use jQuery's DOM traversal methods, such as closest() and find(), to relate the element that raised the click event to those around it which you want to affect.
Also note that your HTML is invalid. ul can only contain li elements, not div, so you need to change the structure slightly.
With that said, try this:
$('.list-link').click(function() {
let $li = $(this).closest('li');
$li.find('.test-div').show(500);
$li.find('.list-link').hide();
$li.find('.Hide').show();
});
$('.Hide').click(function() {
let $li = $(this).closest('li');
$li.find('.test-div').hide(500);
$li.find('.list-link').show();
$li.find('.Hide').hide();
});
.list-entry {
background-color: darkgrey;
width: 200px;
margin-bottom: 10px;
list-style: none;
}
.test-div {
width: 200px;
height: 100px;
background-color: blue;
display: none;
}
.Hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul class="list">
<li class="list-entry">
<p> test 1</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
<div class="test-div"></div>
</li>
<li class="list-entry">
<p> test 2</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
<div class="test-div"></div>
</li>
<li class="list-entry">
<p> test 3</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
<div class="test-div"></div>
</li>
</ul>
Also note that I updated the demo to use jQuery v3.6.0, as 2.1.4 is very outdated.
Within my webpage I am having issues with a iFrames. The iFrame is being used to cycle through different Webpages.
The issue I am experiencing is that it appears as only a thin bar (see picture)? Can someone help me on how I fit the cycling websites within a defined diameter? I have research around this topic as I am already working with some code found in iFrames.
iFrame_Issue
Thanks in advance! -Adam
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Tab Title In Window-->
<title>GKN BI/IT PVD Notice Board</title>
<!-- CSS Style-->
<style type="text/css">
body { margin:0;padding:0;font-family: Sans-Serif;line-height: 1.5em;}
header {background: #FFFFFF;height: 100px;}
header h1 {margin: 0;padding-top: 15px;}
main {padding-bottom: 10010px;margin-bottom: -10000px;float: left;width: 100%;}
nav {padding-bottom: 10010px; margin-bottom: -10000px;float: left;width: 230px; margin-left: -230px;background: #FFFFFF;}
footer{ clear: left;width: 100%;background: #FACC2E;text-align: center;padding: 0px 0;}
#wrapper {overflow: hidden;}
<!--Same as 'nav' width -->
#content {margin-right: 230px; }
<!-- Padding for content -->
.innertube {margin: 15px;margin-top: 0; height: 200%; width: 200%;}
p {color: #555;}
nav ul {list-style-type: none;margin: 0;padding: 0;}
nav ul a {color: #336699;text-decoration: none;}
</style>
</head>
<!--Web banner-->
<header>
<center-left>
<table width="875" align="left" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="Images/bi_it_banner.png">
</td>
</tr>
<!--Web banner 2-->
<tr>
<td>
<img src="Images/background.jpg">
</td>
</tr>
</table>
</header>
<body>
<div id="wrapper">
<main>
<!--Title and iFrame Cycle-->
<div id="content">
<div class="innertube">
<h1>Current Projects</h1>
<br>
<br>
<!--iFrame-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
var sites = [
"http://ourspace.gkn/drivelive/",
"http://ishare.driveline.gkn.com/SitePages/Home.aspx",
"https://idash.driveline.gkn.com/josso/signon/login.do?josso_back_to=http://idash.driveline.gkn.com/applicationOverview/josso_security_check&josso_partnerapp_id=applicationOverview"
];
var currentSite = sites.length;
$(document).ready(function () {
var $iframe = $("iframe").attr("src","http://www.google.com");
setInterval(function() {
(currentSite == 0) ? currentSite = sites.length - 1 : currentSite = currentSite -1;
$iframe.attr("src",sites[currentSite]);
}, 7000);
});
</script>
<style type="text/css" media="screen">
iframe {
height: 200%;
width: 100%;
border: none;
}
</style>
<br>
<iframe></iframe>
<br>
</div>
</div>
</main>
<!-- Code for Navigation Bar and Time&Date -->
<nav>
<div class="innertube">
<!--Time/Date Function-->
<center>
<table width="200" align="left" cellpadding="0" cellspacing="0">
<script type="text/javascript">
<!--Date-->
var tmonth=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
function GetClock(){
var d=new Date();
var nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear();
if(nyear<1000) nyear+=1900;
<!--Time-->
var nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds();
if(nmin<=9) nmin="0"+nmin
if(nsec<=9) nsec="0"+nsec;
document.getElementById('clockbox').innerHTML=""+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+"";
}
<!--Load into webpage and carry out function above-->
window.onload=function(){
GetClock();
setInterval(GetClock,1000);
}
</script>
<div id="clockbox"></div>
<h3>GKN Sites</h3>
<ul>
<li><a target="_blank" href="http://ourspace.gkn/drivelive/">Drivelive</a></li>
<li><a target="_blank" href="http://ishare.driveline.gkn.com/IT/SitePages/Home.aspx">BI/IT iShare</a></li>
<li><a target="_blank" href="">Others?</a></li>
</ul>
<h3>Suggested Reading</h3>
<ul>
<li><a target="_blank" href="#">Link 1</a></li>
<li><a target="_blank" href="#">Link 2</a></li>
<li><a target="_blank" href="#">Link 3</a></li>
<li><a target="_blank" href="#">Link 4</a></li>
<li><a target="_blank" href="#">Link 5</a></li>
</ul>
<h3>External News</h3>
<ul>
<li><a target="_blank" href="http://www.bbc.co.uk/news">BBC News</a></li>
<li><a target="_blank" href="http://www.bbc.co.uk/travel">BBC Travel</a></li>
<li><a target="_blank" href="http://www.bbc.co.uk/weather/">BBC Weather</a></li>
</ul>
</div>
</nav>
</div>
</table>
<!-- End of code for Navigation Bar -->
<footer>
<div class="innertube">
<marquee><img src="Images/GKN.svg.png" height="25" width="60"> Hopefully feed text from text file here</marquee>
</div>
</footer>
</body>
</html>
I am trying to do a script for a specific tab when it is active, my code is just like this. Each Tabs has different sizes, and I want to have that .content will change its height on every tabs.
<div class="content">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="1" class=".singles"><div class="leftupt">...</div><div class="wrapright"> ...</div> ... </div>
<div id="2" class=".singles"><div class="leftupt">...</div><div class="wrapright"> ...</div> ... </div>
<div id="3" class=".singles"><div class="leftupt">...</div><div class="wrapright"> ...</div> ... </div>
<div id="4" class=".singles"><div class="leftupt">...</div><div class="wrapright"> ...</div> ... </div>
</div>
this is the css of .leftup
.leftupt {
display: block;
font-family: 'FuturaLTRegular';
height: auto;
left: 31px;
margin: 0 !important;
padding: 0;
position: absolute;
text-align: center;
top: 429px;
width: 360px !important;
}
for now this is what it look like..
<div id="1" class=".singles"><div class="leftupt">...</div><div class="wrapright"> ...</div> ... <script></script> </div>
<div id="2" class=".singles"><div class="leftupt">...</div><div class="wrapright"> ...</div> ... <script></script> </div>
<div id="3" class=".singles"><div class="leftupt">...</div><div class="wrapright"> ...</div> ... <script></script> </div>
<div id="4" class=".singles"><div class="leftupt">...</div><div class="wrapright"> ...</div> <script></script> </div>
my script is like this but it won't work...
<script type='text/javascript'>
var biggestHeight = jQuery(".content").height();
jQuery(".leftupt").each(function(){
if (jQuery(this).height() > biggestHeight ) {
biggestHeight = jQuery(this).height();
}
});
if (jQuery('.leftupt').height == 0){
biggestHeight=jQuery('.content').height();
}
jQuery(".content").height(biggestHeight);
</script>
Is it possible that it can give the .content height that is dynamic and not static, if what is the height of the .left, it will also the lenght of the .content?
Try to change this
if (jQuery('.leftupt').height == 0)
to
if (jQuery('.leftupt').height() == 0)
when I run the below code, the page doesn't scroll, and doesn't show all of my page container. first I used Ajax but my menu didn't work. then I had to use Iframe tag. but it has a problem too. I try to discover the problem but I didn't succeed. can anybody help me to solve this?
<div id="maincontainer" style="position: fixed; width: 80%; height:500px; right: 10%; ">
<table style="background-color: rgb(100, 100, 100); border-radius: 5px;" dir="rtl">
<tr>
<td style="width: 90px; height: 30px;">صفحه اصلی</td>
<td style="width: 60px; height: 30px;">پروفایل</td>
</tr>
</table>
<div id="three" style="font-family: 'B Homa'; font-size: large;">
<ol>
<li data-slide-name="slide-one">
<h2>
<span>مدیریت مدیران</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/1.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-two">
<h2>
<span>مدیریت فرم ها</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/2.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-three">
<h2>
<span>مدیریت فرهنگی</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/3.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-four">
<h2>
<span>مدیریت آپلود سنتر</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/4.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-five">
<h2>
<span>مدیریت اخبار</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/5.jpg" alt="image" />
</div>
</li>
</ol>
<noscript>
<p>
Please enable JavaScript to get the full experience.
</p>
</noscript>
</div>
<div>
<ul class="menu">
<li><span class="l"></span><span class="r"></span><span class="t">مديريت کاربران</span>
<ul>
<li>کاربران فعال</li>
<li>کاربران بلاک</li>
<li>تمام کاربران</li>
<li>کاربران تایید نشده</li>
</ul>
</li>
<li><a href="#"><span class="l"></span><span class="r"></span>
<span class="t">مديريت آپلودسنتر</span></a>
<ul>
<li>نمایه جدید</li>
<li>لیست نمایه ها</li>
<li>دسته بندی جدید</li>
<li>لیست دسته ها</li>
<li>آیتم جدید</li>
<li>لیست آیتم ها</li>
</ul>
</li>
</ul>
</div>
<div id="contentwrapper">
<div id="contentcolumn"><%--<div id="newContent" style="float:left; width: 100%; height: 615px; direction: rtl; ">
</div>--%>
<iframe id="frame" runat="server" style="width: 1095px; height: 1600px;"></iframe>
</div>
</div>
<div id="stickybar" class="expstickybar">
</div>
<div style="text-align: center; padding-top: 3px">
<b>Copyright (c)</b>
</div>
<!-- LeftPanel Plugin -->
<div class="float">
<div class="moduletable">
<p>
برنامه امروز
</p>
</div>
</div>
<script language="javascript" type="text/javascript">
//$(document).ready(function () {
// $('#accordion').accordion();
//});
function ChangeSrc(trg) {
var frm = document.getElementById("frame");
if (frm) {
frm.src = trg;
}
}
</script>
<script type="text/javascript">
(function ($, d) {
$('#three').liteAccordion({ autoPlay: true, theme: 'dark', rounded: true, enumerateSlides: true, firstSlide: 1, easing: 'easeInOutQuart' });
})(jQuery, document);
</script>
</div>
Please, just remove the css property position: fixed; from maincontainer div.
As you can see at this sample that I made from you sample html code, I just remove that property.
You could also play around with the css property overflow:auto; that controls when to show the scroll, or show/hide the content beyond the limited area of a div.