colorbox - inline html not showing - html

Essentially, I want to make a colorbox pop up upon clicking the link "About Us" as seen on "Inline HTML" under Other Content Types at Inline HTML example. However, the link doesn't do anything. I have also double checked the files in the header and they do link to the right directory.
<head>
<link rel="stylesheet" href="../../../Colorbox/example1/colorbox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../../../Colorbox/jquery.colorbox-min.js"></script>
<script>
$(document).ready(function(){
$(".inline").colorbox({inline:true, width:"50%"});
});
</script>
</head>
<body>
<div id="copyright" class="container">
<p>© All rights reserved. | <a class='inline' href="#inline_content">About Us</a> | <a class ="contact">Contact Us</a></p>
</div>
<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff;'>
<p><strong>This is a test.</strong></p>
</div>
</div>
</body>

Related

html css external style sheet does not work

I am a newcomer to html and web development.
Recently I want to create my website and on one of the pages I want it have a form.
I use pageclip and followed instructions from it.
The site is on: wcyat.me/pageclip
code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<link href="https://s.pageclip.co/v1/pageclip.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<form action="https://send.pageclip.co/p4eaPA68eOwq8IiuoAfyxqPcXirFGmfr/contact-form" class="pageclip-form" method="post">
<!-- Replace these inputs with your own. Make sure they have a "name" attribute! -->
<!-- It looks like you are creating a contact form. These email and subject fields are special -->
<!-- See https://pageclip.co/docs#special-fields for more info -->
<input type="email" name="email" value="roscoe#example.com" />
<input type="text" name="subject" value="A contact subject" />
<!-- This button will have a loading spinner. Keep the inner span for best results. -->
<button type="submit" class="pageclip-form__submit">
<span>Send</span>
</button>
</form>
<script src="https://s.pageclip.co/v1/pageclip.js" charset="utf-8"></script>
</body>
<footer class="site-footer">
<center>
<div id="footer">
<img src="https://simpleanalyticsbadge.com/wcyat.me" loading="lazy" referrerpolicy="no-referrer" crossorigin="anonymous" />
<img alt="github" src="https://raw.githubusercontent.com/wcyat/wcyat.github.io/main/images/GitHub-Mark.png"width=50" height="46.06">
<img alt="telegram" src="https://raw.githubusercontent.com/wcyat/wcyat.github.io/main/images/Logo.svg"width=40" height=40">
</div>
</center>
</footer>
</html>
I don't know whether it's my problem or not because I don't really know a lot about web development.

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?

jquery mobile multipage in separate html files

I have a Jquery Mobile multipage with different pages
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="lib/jquery.tmpl.min.js"></script>
<script>
$(document).ready(function(){
$(document).on("pagebeforeshow", "#mainPage", function(e, data) {
showPageDossiers(filename, selector);
});
//do some initialization stufff
)};
function showPageDossiers(filename, selector) {
// incldue template
$.get(filename, function(template) {
$(selector).html(template);
$(selector).trigger("create");
});
}
</script>
</head>
<body>
<div id="mainPage" data-role="page" data-title="Main">
<!-- in comment, this code in external HTML file
<div data-role="header"><h2>Main Page</h2></div>
<div class="ui-content" data-role="content" role="main">
<div id="divListeDossiers">
<ul id="listeDossiers" data-role="listview" data-inset="true">
<li>GOTO Page2 </li>
</ul>
</div>
</div>
<div data-role="footer"><h4>Footer</h4></div>
-->
</div>
<div id="page2" data-role="page" data-title="page2">
<div data-role="header"><h2>Page 2</h2></div>
<div class="ui-content" data-role="content" role="main">
<div id="divList">
<ul id="listeDossiers" data-role="listview" data-inset="true">
<li>GOTO page3 </li>
</ul>
</div>
</div>
<div data-role="footer"><h4>Footer</h4></div>
</div>
<div id="page3" data-role="page" data-title="page23">
<div data-role="header"><h2>Page 3</h2></div>
<div class="ui-content" data-role="content" role="main">
<div id="divList">
<ul id="listeDossiers" data-role="listview" data-inset="true">
<li>GOTO mainPage </li>
</ul>
</div>
</div>
<div data-role="footer"><h4>Footer</h4></div>
</div>
</body>
</html>
I would like to put the code between the
<div id="pageXX"> .... </div>
in separate JSP files since I may have more pages. Having all in one main
JSP file make it hard to manage and read.
For example, my separate content for the mainPage div, will look like
<div data-role="header"><h2>Main Page</h2></div>
<div class="ui-content" data-role="content" role="main">
<div id="divListeDossiers">
<ul id="listeDossiers" data-role="listview" data-inset="true">
<li>GOTO Page 2 </li>
</ul>
</div>
</div>
<div data-role="footer"><h4>Footer</h4></div>
I basically had a Main Page that had a link to page 2 and Page2 had a page to Page 3 and Page3 had a link to MainPage.
I googled but the only things I found is linking to external HTML file.
Anyone known how to break the main file into separate files ?
Thanks
UPDATE : with a complete code that I had now
Use the jquery template system :) On the page before event in javascript you can include the html file.
$(document).on("pagebeforeshow", "site_id", function(e, data) {
showPasswordReset();
});
function showPasswordReset() {
// incldue template
$.get("templates/reset_password.html", function(template) {
$("site_id div[data-role='content']").html(template);
$("site_id div[data-role='content']").trigger("create");
});
}
you have to download the jquery.tmpl.min.js that this will work.
There's nothing much to know, create normal jquery-mobile pages each one with only 1 div with data-role='page' and then use them normally.
A normal link to those pages would use the jquery-mobile ajax navigation model to load the page, and display the data-role='page' div as main content.

Twitter Bootstrap Modals not working with MVC3

I am attempting to implement a modal dialog inside of my MVC3 application. Right now I'm just fiddling with it. Here is my code:
#model AROrdering.Models.Category
#{
ViewBag.Title = "Browse";
Layout = null;
}
<html>
<head>
<title>test</title>
<link href="#Url.Content("~/Content/testbootstrap.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/testbootstrap.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/testjquery-1.9.1.js")" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#showGame').click(function () {
$('#gameModal').modal('show');
});
});
</script>
</head>
<body>
<div class="container">
<div id="gameModal" class="modal hide fade in">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>This is a Modal Heading</h3>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>You can add some text here.</p>
</div>
<div class="modal-footer">
Call to action
Close
</div>
</div>
<button id="showGame" class="btn btn-primary btn-large">Show Game Listing</button>
</div>
</body>
</html>
If I implement this exact html in a plain html page outside of the app, the modal dialog works. But when I move the code over, it does not. I am using the same css and javascript files. Does anyone have an idea of why this breaks when I move over to MVC3?
jQuery needs to load before the bootstrap javascript. Fix the order of your script references and it should work.

Loading external data using JSON for JQTouch

I am trying to load some external data into a JQTouch app using JSON. My problem is I don't know what js to use and where to put it.
My html is very simple - a few divs for the pages in the app.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> google.load("jquery", "1.4.2"); </script>
<script type="text/javascript" src="jqtouch/jqtouch.min.js" charset="utf-8"></script>
<script type="text/javascript"> $.jQTouch(); </script>
<script src="javascripts/cricket.js" type="text/javascript"></script>
<style type="text/css" media="screen">#import "jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">#import "themes/apple/theme.css";</style>
<title>Cricket</title>
</head>
<body>
<!-- "Main Menu" -->
<div id="home" class="current">
<div class="toolbar">
<h1>Cricket</h1>
</div>
<ul class="rounded">
<li class="arrow">Clubs</li>
<li class="arrow">Fixtures</li>
<li class="arrow">Twitter</li>
</ul>
<ul class="rounded">
<li class="arrow">About</li>
</ul>
</div>
<!-- "Clubs" - Will contain the list of clubs -->
<div id="clubs">
<div class="toolbar">
<h1>Clubs</h1>
<a class="button back" href="#">Back</a>
</div>
<div id="clubslist">
Loading....
</div>
</div>
<!-- "Fixtures" - Will contain the list of fixtures -->
<div id="fixtures">
<div class="toolbar">
<h1>Fixtures</h1>
<a class="button back" href="#">Back</a>
</div>
<ul class="rounded">
<li>Loading....</li>
</ul>
</div>
<!-- "Twitter" - Will contain the tweets -->
<div id="twitter">
<div class="toolbar">
<h1>Twitter</h1>
<a class="button back" href="#">Back</a>
</div>
<ul class="rounded">
<li>Loading tweets....</li>
</ul>
</div>
<!-- "About" - Will contain info about the app/contact -->
<div id="about">
<div class="toolbar">
<h1>About</h1>
Back
</div>
just some text
</div>
Then this is the script that I think I need to use to load the external data (from clubs.php).
<script type="text/javascript">
$.getJSON('http://www.mydomain.com/clubs.php', function(data) {
$.each(data, function(i,item){
$('clubslist').append('<li>' + item.club_name + '</li>');
});
});
</script>
My question is where do I need to putthis and how does it get triggered?
I think I need to put this in a separate JS file (I have already got one called cricket.js which i linked to in the head of the html file). Then I assume I need something to trigger the JS to run... like PageAnimationEnd or similar?
For what it's worth, this is what the clubs.php returns
{"posts":[{"post":{"club_id":"1","club_name":"ABC Cricket Club","club_postcode":"AB12 3DE"}},{"post":{"club_id":"2","club_name":"Beston Cricket Club","club_postcode":"NG1 9XY"}}]}
My ideal situation is that when the user clicks on the 'Clubs' link on the menu page, this fires the page animation where the user then sees 'Loading'. In the background, the Javascript is fired, retrieves the data from clubs.php and then appends it in to the #clublist div.
I think I am close, but missing the final finishing touch. All suggestions appreciated!
Tom
In my pages I do the following, in this example I am pulling a table from a backend script.
function prevOrders()
{
$("#chkPrevOrd").html('Please wait')
$.ajax({
type: "POST",
url: "http://"+document.domain+"/store.php",
data: { method: "prevOrders"},
dataType: "json",
timeout: ajaxTimeout,
success: function(data){
if (data.prevOrders)
{
$("#prevOrderStatus").html(data.prevOrders);
$("#chkPrevOrd").html('Update')
}
},
error: function() {
alert('This is taking too long. You could try again now, or wait and try again later.');
}
});
}
#prevOrderStatus is a DIV on this page, #chckPrevOrd is just a button to let the user know what is happening. you would JQT.Goto('cointainer div for #chkPrevOrd') to go to this page if #chkPrevOrd was actually on a different page.