This is my site
<!DOCTYPE html>
<html>
<head>
<title>gump</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<a><img src="pictures/logo.png" alt="gump" style="height:25px" href="#default" class="logo";></a>
<div class="header-right">
<a class="active">Home</a>
Links
Encryption
</div>
</div>
<div style="padding:25px">
<table style="width:100%; table-layout:fixed">
<tr>
<td style="font-weight:bold">Sites</td>
<td style="font-weight:bold">Partners</td>
<td style="font-weight:bold">Social Media</td>
<td style="font-weight:bold">Tools</td>
<td style="font-weight:bold">Links</td>
</tr>
<tr>
<td>Home</td>
<td>pherbich.com</td>
<td>Steam</td>
<td>byom.de</td>
<td>gumprecht.co.at</td>
</tr>
</table>
</div>
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script></body>
</html>
Thats too much of just the header and the footer, i want to have the header and the footer external on a external html, but how can i get the external header.html and the footer.html in the index.html
I was looking recently on the same topic and this article explains how you can do it.
Link to the Atricle
Related
Im trying to get datatables to work for a basic table
This is my error
Below is my layouts file, where i include the script tags and css tags / they are noted
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- font awesome icon kit - check favourite tabs in chrome to get more -->
<script src="https://kit.fontawesome.com/69e69f8319.js" crossorigin="anonymous"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{config('app.name', 'Coffee')}}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="../css/app.css">
<!-- ck editor cdn-->
<script src="https://cdn.ckeditor.com/4.15.1/standard/ckeditor.js"></script>
<!-- Datatables link -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
</head>
<body style="background-color: lightgrey !important;">
#include('inc.admin_navbar')
<div class="container">
#yield('content')
#if(session('success_message'))
<div class="alert alert-success">
{{session('success_message')}}
</div>
#endif
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- datatables js link -->
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
#include('sweetalert::alert')
</body>
</html>
Here is my file that includes the targeted table and the javascript. This file extends from the layouts file where the datatable links are nested
<table id="datatable" class="table table-striped table-hover">
<htead>
<th>ID</th>
<th>Name</th>
<th>Date Joined</th>
<th></th>
</htead>
<tbody>
#foreach($posts as $post)
<tr>
<th>{{$post->id}}</th>
<th>{{$post->title}}</th>
<th>{{$post->created_at}}</th>
<th>
<div class="row">
<div class="col">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editModal">Edit</button>
</div>
<div class="col">
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#delete">Delete</button>
</div>
</div>
</th>
</tr>
#endforeach
</tbody>
</table>
Here is the js at the bottom on the file
<script type="text/javascript">
$(document).ready(function () {
//linked to our main table - js function
var table = $('#datatable').DataTable();
})
</script>
please include Jquery before datatable load
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
Include jQuery into your code, right after body tag ends </body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
I try to open new window when the button clicked but when the new window opened it shows nothing ....It supposed to show my layout that I made from blade view file ... when i check console nothing error shown
here is my view blade file
SLACategoryCheckBoxList.blade.php
!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>{{ __('messages.module.incidentmgt') }}</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{ asset('css/app.v2.css') }}" />
<link rel="stylesheet" href="{{ asset('css/popupPage.css') }}" />
<script src="{{ asset('js/BaseCommon.js') }}"></script>
<script src="{{ asset('js/app.v2.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('js/jquery-3.2.1.min.js') }}"></script>
<script>
</script>
</head>
<body>
<form role="form" method="post" action="" enctype="multipart/form-data">
<table width="100%" border="0" cellpadding="" cellspacing="0">
<tr>
<td class="header">{{ __('messages.module.refmgt') }} ›› <span class="header-selblue">{{ __('messages.module.category') }}</span></td>
</tr>
<tr>
<td class="none">
<table class="fixed_header" width="100%" cellpadding="1" cellspacing="1" border="0">
<thead>
<tr class="subheader-blue">
<td style='width: 300px;'>{{ __('messages.refcategory.abbr') }}</td>
<td style='width: 6000px;'>{{ __('messages.customer.name') }}</td>
<td style='width: 110px;'> </td>
</tr>
</thead>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
web.php
Route::group(['prefix' => 'sla'], function () {
Route::get('sla/getCategory','SlaController#slaCategoryTreeListScreen')->name('sla.slaCategoryTreeListScreen');
});
SlaController.php
public function slaCategoryTreeListScreen() {
return view('sla.slm.SLACategoryCheckBoxList');
}
my other view blade that trigger button
<a class="btn btn-sm btn-default pull-right" type="button" title="Search Category" onclick="openNewWindow('{{ route('sla.slaCategoryTreeListScreen') }}')" >
just solved this error by putting all resource route below get route in web.php
(answered by #adaminho)
Firstly, I have this view on table:
when I click the td, it opens the PrettyPhoto Lightbox
on prettyPhoto, the default html trigger is:
<a href="images/fullscreen/2.jpg" rel="prettyPhoto" title="This is the description">
<img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="This is the title" />
</a>
but instead I have this html:
<a href="image.jpeg" data-rel="prettyPhoto" rel="prettyPhoto[pp_gal]" class="kt-user-card-v2">
<div class="kt-user-card-v2__pic">
<img src="http://wasapbro-2019.test/storage/msg/cupb1RUgcGLnUovQi7eBpxLIIRu37sPKcha1jjuI.jpeg" class="m-img-rounded kt-marginless" alt="photo">
</div>
<div class="kt-user-card-v2__details">
<span class="kt-user-card-v2__name">test</span>
</div>
</a>
on mine that fails to trigger
How do I solve this?
I am not sure how you are initializing PrettyPhoto, but I set up this quick demo using your DOM structure and it seems to work just fine. One thing to note is that you need to use jQuery version 2.x or older since PrettyPhoto relies on .size(); which isn't available in jQuery 3.0+.
$(document).ready(function() {
$("a[rel^='prettyPhoto']").prettyPhoto();
});
<!DOCTYPE html>
<html>
<head>
<title>Pretty Photo</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://lib.arvancloud.com/ar/prettyPhoto/3.1.6/css/prettyPhoto.min.css" type="text/css" media="screen" charset="utf-8" />
<script src="https://lib.arvancloud.com/ar/prettyPhoto/3.1.6/js/jquery.prettyPhoto.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<table>
<tr>
<td>
<a href="https://live.staticflickr.com/8183/8079715772_f003d725d1_z.jpg" data-rel="prettyPhoto" rel="prettyPhoto[pp_gal]" class="kt-user-card-v2">
<div class="kt-user-card-v2__pic">
<img src="https://live.staticflickr.com/8183/8079715772_f003d725d1_z.jpg" class="m-img-rounded kt-marginless" alt="photo">
</div>
<div class="kt-user-card-v2__details">
<span class="kt-user-card-v2__name">test</span>
</div>
</a>
</td>
</tr>
<tr>
<td>
<a href="https://live.staticflickr.com/8512/8509212953_4cfefc8b9a_z.jpg" data-rel="prettyPhoto" rel="prettyPhoto[pp_gal]" class="kt-user-card-v2">
<div class="kt-user-card-v2__pic">
<img src="https://live.staticflickr.com/8512/8509212953_4cfefc8b9a_z.jpg" class="m-img-rounded kt-marginless" alt="photo">
</div>
<div class="kt-user-card-v2__details">
<span class="kt-user-card-v2__name">test</span>
</div>
</a>
</td>
</tr>
</table>
</body>
</html>
i have to two pages in jquery mobile and in each of the pages is a div called content and inside the divs i call external pages into it by means of ajax. for "page1" the call works perfectly but for "page2" the call isn't working. though the div in "page2" is having the same name as that of "page1".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$.ajaxSetup({ cache: false });
setInterval(function() {
$('#content').load('total.asp');
}, 3000);
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div data-role="content">
<table width="311" border="0" cellpadding="3" cellspacing="3">
<tr>
<td width="77">Content</td>
<td width="102"><div id="content"></div></td>
<td width="102">Go to Page 2</td>
</tr>
</table>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
<p>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div data-role="content">
<table width="320" border="0" cellpadding="3" cellspacing="3">
<tr>
<td width="77">Content</td>
<td width="102"><div id="content"></div></td>
<td width="102">Go to Page 1</td>
</tr>
</table>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</p>
</body>
</html>
try using:
$("div").find("[data-role='content']").load('total.asp');
because you have given it as data attribute. you can better use class if you have multiple id with same name in that case it will be:
$(".content").load('total.asp');
ID has to be unique. try changing id="content" to class="content" and then try the below code
$.ajaxSetup({ cache: false });
setInterval(function() {
$('.content').load('total.asp');
}, 3000);
});
I'm very new to coding, so bear with me. I've looked at a few of the answered posted for the same question, and have gotten the code to work while inputting my information in some of the solved jsfiddle links.
The problem is: When I plug the working code into my HTML and JS file, it doesn't seem to work. I've looked over my code and am not sure what's breaking it or why it's not showing. I was wondering if anyone could look at my code and tell me why?
The section I'm talking about is the Browse Menu and Menu Output sections. Basically, if you click an image (omnivore, vegetarian, healthy) in the browse menu navigation, the corresponding menu output will be shown.
I've also included my HTML and JS to this post. The styles and spacing are a little messed up right now since I've been tinkering with things in my Mark up. I also recently read that tables are bad, so I will be changing that in my html to unordered lists.
Thanks so much!
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Spice Up Your Love Life: An Interactive Dating Experience</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="date, interactive, cooking, culinary, dating, couple, love, date ideas, vancouver, spice, love life, experience">
<meta name="Spice Up Your Love Life" content="SpiceUpYourLoveLife.com is an interactive dating experience in which you and your date can cook a meal together. Eat your heart out!">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style2.css">
<link href='http://fonts.googleapis.com/css?family=Rokkitt:400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
#font-face{
font-family: "talldark";
src: url('http://fontsforweb.com/public/fonts/383/talldark.eot');
src: local("Tall Dark And Handsome Condensed"), url('http://fontsforweb.com/public/fonts/383/talldark.woff') format("woff"), url('http://fontsforweb.com/public/fonts/383/talldark.ttf') format("truetype");
}
.diettitle {
font-family: "talldark";
font-size: 6em;
letter-spacing: 5px;
color: #b5a839;
}
.testerz {
font-family: "talldark";
font-size: 1em;
letter-spacing: 4px;
color: #b5a839;
}
</style>
</head>
<body>
<header>
Spice Up Your Love Life: An Interactive Dating Experience
</header>
<div id="topnavcontainer">
<table id="topnav">
<tr>
<td id="break">Breakfast</td>
<td id="lunch">Lunch</td>
<td id="dinner">Dinner</td>
<td id="appetizer">Appetizer</td>
<td id="desert">Desert</td>
<td id="snack">Snack</td>
</tr>
</table>
</div>
<table id="mainnav">
<tr>
<td id="home" class="bordernav">Home</td>
<td id="works" class="bordernav">How It Works</td>
<td id="menu" class="bordernav">Menu</td>
<td id="mainnavbordernone"></td>
<td id="tips" class="bordernav">Tips and Tricks</td>
<td id="contact" class="bordernav">Test Skills</td>
<td id="share" class="bordernav">Share</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td id="logo"><img src="images/logo.png" alt="Spice Up Your Love Life Logo" width="189" height="170"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td id="spicetitle" class="title">SPICE</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td id="upyourtitle" class="title">UP YOUR</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td id="lovelifetitle" class="title">LOVE LIFE</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div class="container">
<!--SPLASH CONTENT-->
<div class="content">
<div id="leftgrid">
<img src="images/block.jpg" width="300" height="184"><br>
<p class="contentheader">HOW DOES IT WORK?</p><br>
<p class="contentdescribed">Does it sound too good to be true? --- Well, it's not! See how it works and and how it all started. </p>
<p class="contentcalltoaction">See how it works</p>
</div>
<div id="middleleftgrid">
<img src="images/block.jpg" width="300" height="184"><br>
<p class="contentheader">WHAT'S FOR DINNER?</p><br>
<p class="contentdescribed">Eat your heart out! Browse our menu and select what
you'd like to cook for your special date. </p>
<p class="contentcalltoaction">Look at the menu</p>
</div>
<div id="middlerightgrid">
<img src="images/block.jpg" width="300" height="184"><br>
<p class="contentheader">IMPRESS YOUR DATE!</p><br>
<p class="contentdescribed">Don't get caught with your elbows on the table!
These tips will have them wanting seconds! </p>
<p class="contentcalltoaction">Learn tips and tricks</p>
</div>
<div id="rightgrid">
<img src="images/block.jpg" width="300" height="184"><br>
<p class="contentheader">GOT WHAT IT TAKES?</p><br>
<p class="contentdescribed">Put your skills to the test! Take our multiple choice test to see what culinary level you're at!</p>
<p class="contentcalltoaction">Test your skills</p>
</div>
</div>
<!-- HOW IT WORKS SECTION -->
<div id="howitworkssec">
<div class="waves"></div>
<h3 class="headliners"><strong>How does it work?</strong></h3>
<img src="images/silboth.png" alt="dating silhouette" width="875" height="499">
</div>
<div id="howdesdiv">
<p id="simpleas">It's as simple as 1, 2, 3.</p>
<p id="howdes">
1. Do this thing and that blah blah<br>
2. Then you do this lolol can you believez it?<br>
3. I'll add the actual content when the site is finished.<br>
</p>
Let's begin!
</div>
<!--BROWSE MENU-->
<div id="diet">
<h3 id="meal" class="headliners">Meal Type</h3>
<p id="lefty" class="curly">{</p>
<p id="righty" class="curly">}</p>
<div class="dietchoice"><img src="images/carnivoreb.png" alt="meat options" width="90" height="93" /><h3 class="testerz">Omnivore</h3></div>
<div class="dietchoice"> <img src="images/vegetarianb.png" alt="meat options" width="90" height="93" /><h3 class="testerz">Vegetarian</h3> </div>
<div class="dietchoice"> <img src="images/healthyb.png" alt="meat options" width="90" height="34" /><h3 class="testerz">Healthy</h3> </div>
<!--MENU OUTPUT-->
<div id="output">
<div id="meat">
<p class="diettypeheading">Magnificent Meat Dishes</p>
<img src="images/centermeatballs.jpg" alt="meatballsplash" width="600" height="400" id="meatleft" >
<img src="images/centerchicken.jpg" alt="meatballsplash" width="533" height="400" id="meatcenter">
<img src="images/centersteak.jpg" alt="meatballsplash" width="529" height="400" id="meatright">
</div>
<div id="veggie">
<p class="diettypeheading">Fresh, Colourful Dishes</p>
<img src="images/centermeatballs.jpg" alt="meatballsplash" width="600" height="400" id="meatleft" >
<img src="images/meatballs.jpg" alt="meatballsplash" width="533" height="400" id="meatcenter">
<img src="images/centersteak.jpg" alt="meatballsplash" width="529" height="400" id="meatright">
</div>
<div id="healthy">
<p class="diettypeheading">Diabetic and Heart Healthy Meals</p>
<img src="images/centermeatballs.jpg" alt="meatballsplash" width="600" height="400" id="meatleft" >
<img src="images/centerchicken.jpg" alt="meatballsplash" width="533" height="400" id="meatcenter">
<img src="images/meatballs.jpg" alt="meatballsplash" width="529" height="400" id="meatright">
</div>
</div>
<!--END OF CONTENT-->
<div class="splashimage">
<img src="images/banner3.png" alt="splash image" width="1664" height="400">
</div>
<div id="sitemap">
<table class="sitemaptab">
<tr id="sitemaptitles">
<th>Get Social</th>
<th>Quick Links</th>
<th>Terms of Use</th>
</tr>
<tr id="row_two">
<td class="social"><img src="images/socialmedia/twit_sm.png" alt="sm-twiticon">Follow Us On Twitter</td>
<td class="quicklinks">Home</td>
<td class="terms">Privacy Policy</td>
</tr>
<tr id="row_three">
<td class="social"><img src="images/socialmedia/fb_sm.png" alt="sm-fbicon">Like Us On Facebook</td>
<td class="quicklinks">Browse Menu</td>
<td class="terms">Contact</td>
</tr>
<tr>
<td> </td>
<td class="quicklinks">How It Works</td>
</tr>
<tr>
<td></td>
<td class="quicklinks">Tips and Tricks</td>
</tr>
<tr>
<td></td>
<td class="quicklinks">Share</td>
</tr>
</table>
</div>
<footer>
<table id="footer">
<tr>
<td id="copyright">Copyright © Spice Up Your Love Life 2013</td>
<td id="webdesby">Web Design By: Ticking and Talking Media</td>
</tr>
</table>
</footer>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/spicelovelife.js"></script>
<script src="js/plugins.js"></script>
<script src="js/vendor/jquery-1.9.0.min.js"></script>
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</body>
</html>
JavaScript:
// Scrolling Function
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
// Load All Images
$('body').waitForImages({
waitForAll: true,
finished: function() {
// All images have loaded.
}
});
//Hide All Divs
$("#output > div").hide();
$(".dietchoice a").click(function(e) {
$("#output div").hide();
$(this.hash).show();
e.preventDefault();
});
$("#areas div:not(#meat)").hide();
Instead of
$(this.hash).show();
You should probably use
$(this.attr('href')).show();
this.hash probably returns undefined because the property hash doesn't exist.
If my solution throws an error like "undefined method attr()" you will probably need to use the jQuery selector.
$($(this).attr('href')).show();
I'd advise using the console object for debugging purpose. You can find some docs about debugging on the Mozilla Developer Network.
This selector $("#output > div") is different from this selector $("#output div"). According to your HTML, both selectors returns the same elements but if you were to change the HTML structure issues might arise.
try, putting the modernizr, jquery and plugin scripts before your code, meaning change this:
<script src="spicelovelife.js"></script>
<script src="js/plugins.js"></script>
<script src="js/vendor/jquery-1.9.0.min.js"></script>
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
to this:
<script src="js/vendor/jquery-1.9.0.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="js/spicelovelife.js"></script>
Hope this help.