HoWhy jquery "waypoints" doesn't work locally? - html

I've tried to use the waypoint library with jquery. I expected to see an alert when the user reaches the purple div. Quite oddly, it only works on the snippets in StackOverflow, but not locally.
Does anyone have an idea what is going on?
$(document).ready(function() {
console.log("document is ready!");
$('#purple').waypoint(function() {
alert('reached purple');
});
});
<!DOCTYPE html>
<html>
<head>
<!-- JQuery CDN !-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- WayPoints CDN !-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js'></script>
</head>
<body>
<div style="background-color:blue;height:300px;width:auto" id="blue"></div>
<div style="background-color:red;height:300px;width:auto" id="red"></div>
<div style="background-color:green;height:300px;width:auto" id="green"></div>
<div style="background-color:yellow;height:300px;width:auto" id="yellow"></div>
<div style="background-color:purple;height:300px;width:auto" id="purple"></div>
<div style="background-color:pink;height:300px;width:auto" id="pink"></div>
</body>
</html>

Related

Bootstrap is not working even though included

Hi Guys I have a problem about bootstrap bootstrap.min.css jquery.min.js and bootstrap.min.js are already included in my project but I cannot use well well-sm class and when I add manually by links this time divs engage you can see in the picture. where is the problem I don't understand?
my code :
#model xx.Web.Models.MiniRepairViewModel
#{
Layout = null;
}
<div class="pageWrapper">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
#Html.Action("Breadcrumb", "Manage")
<div class="TextBody">
<div class="container">
#Html.Action("LeftMenu", "Manage") //menu engage
<div class="col-threeQuarters">
#using (Ajax.BeginForm("MiniRepairServiceAdd", "Ajax", new AjaxOptions { OnSuccess = "jsFilt", OnFailure = "OnFailure" }))
{
<ul class="Form">
<li class="oneColumsFull">
#Html.DropDownListFor(x => x.GetCityModel.a, (IEnumerable<SelectListItem>)ViewBag.CitiesList, "select", new { name = "x", id = "y" })
</li>
<li id="ilce" class="twoColumsFull" style="display:none;">
</li>
<li class="oneColums"><input type="text" name="serviceName" id="serviceName" placeholder="Service"></li>
<li class="button"><input class=".bh-sl-reset" id="reset" type="button" value="clear" onclick="javascript: window.location.reload();"></li>
<li class="button"><input type="submit" value="search" name="search"></li>
</ul>
}
<div id="myDiv" class="well well-sm"> </div> //not working
</div>
</div>
</div>
</div>
I am not sure if colThreeQuarters is a bootstrap class, the actual class is col
<div class="container">
<div class="row">
<div class="col-md-9> // 3quarters
</div>
</div>
</div>
You Need to include headtag before Bodytag and add the bootstrap cdn in that head and write you js cdn at bottom of body tag.
SO the code structure will be like this
<html>
<head>
<bootstrap cdn>
</head>
<body>
your content
...
..
<js cdns>
</body>
</html>
This is because you are not loading your bootstrap cdn at right place. You should load all your scripts files inside your head tag as #yashwardhan said.
this mean:
Go to your code, find </head> tag and load all your scripts and css file just before this tag.
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
and use the right bootstrap syntax. colThreeQuarters is not a bootstrap class
Why you should do this, is explained here:-
Where should I put <script> tags in HTML markup?

How can I choose who of the tabindex="0" start when the page load

Important note: all the indexes must be 0 (tabindex="0"), I can not use another numbers (like: tabindex="1",tabindex="2"...tabindex="n").
for example: my html code is:
<div tabindex="0">first</div>
<div tabindex="0">second</div>
<div tabindex="0">third</div>
<div tabindex="0">Etc...</div>
Now - I want to focus on the second div by default, so when I click on Tab - the focus will be on third div, and so on
<!DOCTYPE html>
<head>
<meta charset="utf-8"></meta>
<script src="https://code.jquery.com/jquery-git1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div[tabindex='0']").eq(1).focus();
});
</script>
</head>
<body>
<div tabindex="0">first</div>
<div tabindex="0">Second</div>
<div tabindex="0">third</div>
<div tabindex="0">Etc...</div>
</body>
</html>
You can use jquery next function to get next sibling.
Here you have working example: https://jsfiddle.net/2muaxbbf/

Changing between 2 chart every 10 seconds using Bootstrap

I have 2 charts(line and bar chart) and I want to change between them every 10 seconds or so. I tried Bootstrap carousel but it doesn't seems to work when I replace the image src with the id of my chart. The id for those 2 charts are:
<div id="SummaryChart"></div>
<div id="DailyBarChart"></div>
Is there a way I could make it work? Thanks!
EDIT:
<!DOCTYPE html>
<html>
<head>
<?php include 'linechart.php'; ?>
<link href="assets/plugins/bootstrap/bootstrap.css" rel="stylesheet" />
</head>
<body>
<div class="cycle-slideshow">
<div id="PieChart"></div>
<div id="DailyBarChart"></div>
</div>
<!-- end page-wrapper -->
<!-- end wrapper -->
<!-- Core Scripts - Include with every page -->
<script src="assets/plugins/bootstrap/bootstrap.min.js"></script>
<script src="assets/scripts/zingchart-html5-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
</body>
</html>
It seems like it could only work on images.
Using jQuery.Cycle2, you could do it this way :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://malsup.github.io/min/jquery.cycle2.min.js"></script>
<div class="cycle-slideshow" data-cycle-timeout="10000" data-cycle-slides="> div">
<div id="SummaryChart"></div>
<div id="DailyBarChart"></div>
</div>

beforeActivate not firing jeasyui

I've read through many of these questions and they are answered the same. I've tried it but can't get it to work. I've gotten the code very small. What am I doing wrong? The tabs work fine, but no event getting fired.
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#tabs').tabs({
beforeActivate: function(event,ui) {
alert("Tabs Changed");
}
});
});
</script>
</head>
<body>
<div class="easyui-tabs" id="tabs">
<div Title="Home" >
Home
</div>
<div Title="Admin">
Admin
</div>
</div>
</body>
</html>
thanks,
dave

iFrame not loading on page load (jQuery Mobile)

I am having trouble getting an iFrame to display the first time that my jQuery mobile backed page loads.
I have an iFrame as follows:
<iframe id="manual" src="pdf/manual.pdf" style="width: 100%; height: 100%;"></iframe>
And for some reason, when the page loads, the iFrame fails to load with it. I can only see the PDF file if I REFRESH the page. Why is that?
Why is the PDF file not showing up in the iFrame in the first place without a page refresh?
Thanks everyone for any insight.
EDIT:
When I try to ope the page with safari, I get the following warning:
Resource interpreted as Document but transferred with MIME type application/pdf.
Could that have something to do with why the PDF doesn't load correctly?
i just tried with the rel="external" it works without refreshing.. The first link is ajax call and the second link is not. it was straight forward, not sure if im missing something else you have..
Page1.html
<!DOCTYPE html>
<html>
<head>
<title>Demo Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Demo Page</h1>
</div>
<div data-role="content">
Another Page
View User Manual
</div>
</div>
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<head>
<title>Another Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-add-back-btn="true">
<iframe id="manual" src="FocusFree.pdf" style="width: 100%; height: 100%;"></iframe>
<div data-role="header" data-theme="none">
<h1>Another Page</h1>
</div>
<div data-role="content" data-theme="none">
<p>This is another page, dude.</p>
</div>
</div>
</body>
</html>
Since it is a ajax call, iframe has to be coded differently.
Check this site, has some solutions...
Site
slight modification to the code in the website to open a pdf.
Page1.html
<!DOCTYPE html>
<html>
<head>
<title>Demo Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Demo Page</h1>
</div><!-- /header -->
<div data-role="content">
<!-- this is a regular page call-->
Another Page
<!-- the functionality for this page is defined in "javascript.js" -->
<!-- we put it in a data attribute to avoid spiders spidering the link and hammering the device -->
Perform Function
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<head>
<title>Another Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-add-back-btn="true">
<div data-role="header">
<h1>Another Page</h1>
</div><!-- /header -->
<div data-role="content">
<p>This is another page, dude.</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
main.js
$(document).ready(function(){
$('#perform-function').bind('click', function(){
// we're storing the link in an attribute
// called 'data-link':
var url = $(this).attr('data-link');
// create iframe if not there, comment display none to see it
if ($('#temp-iframe').length === 0) {
$('<iframe />').attr({
id: 'temp-iframe',
name: 'temp-iframe',
height: '100%',
width: '100%'
}).css({
position: 'absolute',
left: '50%',
bottom: 0
}).bind('load', function(){
}).appendTo('body');
}
// call the url into the iframe
$('#temp-iframe').attr('src', url);
// jquerymobile already does this because the link is just "#"
// but if you end up
return false;
});
});