Ich have a problem with my custom wordpress page.
I want to use the default header and footer.
This issue only happens on safari. On Chrome it works fine!
The footer is shown in the middle of the page and not at the end of the page.
Do you have any suggestion?
Here is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fahrzeugkunde - TLF</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="Modal.css">
</head>
<body>
<div>
<?php require($_SERVER['DOCUMENT_ROOT'] . '/wp-load.php');
get_header(); ?>
</div>
<main class="feuerwehr-body">
<div class="feuerwehr-flexContainer">
<div class="feuerwehr-imageContainer">
<img class="feuerwehr-image" src="../images/TLF/GA2.JPG" alt="GA2" usemap="#image-mapGA2">
<map name="image-mapGA2">
<area class="area" shape="rect" coords=" 1885, 1611, 2101, 2130 " alt="placeholder" onclick="openInfo('Feuerlöscher', 'Das ist ein Feuerlöscher')">
</map>
</div>
<div class="feuerwehr-imageContainer">
<img class="feuerwehr-image" src="../images/TLF/GA4.JPG" alt="GA4" usemap="#image-mapGA4">
<map name="image-mapGA4">
<area class="area" shape="rect" coords=" 97, 525, 1340, 790 " alt="placeholder" onclick="openInfo('Feuerlöscher', 'Das ist ein Feuerlöscher')">
</map>
</div>
<div class="feuerwehr-imageContainer">
<img class="feuerwehr-image" src="../images/TLF/GA6.JPG" alt="GA6" usemap="#image-mapGA6">
<map name="image-mapGA6">
<area class="area" shape="rect" coords=" 199, 642, 366, 1829 " alt="placeholder" onclick="openInfo('Feuerlöscher', 'Das ist ein Feuerlöscher')">
</map>
</div>
<div id="myModal" class="Modal is-hidden is-visuallyHidden">
<!-- Modal content -->
<div class="Modal-content" id="modal-image-container">
<div class="modal-image" id="modal-image">
</div>
<div style="display: flex; justify-content: end;">
<button class="custom-button custom-button--inline" id="sig-cancellationBtnImage">Zurück</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script>
<script src="Modal.js"></script>
<script src="index.js"></script>
</main>
<div style="display: none">
<?php get_footer(); ?>
</div>
</html>
The get_footer() wordpress method add a html template code to your page : https://developer.wordpress.org/reference/functions/get_footer/
The call should be INSIDE html tags (same with get_header()). Maybe chrome is ok with that but safari seems to be more sensitive.
Anyway, the wordpress load a lot of css and js files and we cannot figure what style is applying on your page in your post.
Its a mistake to put the </html> after the get footer() function Because it should be already inside the footer file. Hope i was clear enough (my english isnt my mother tounge).
Related
I am working on a very basic HTML page that has a little bit of Javascript functionalities. Nothing fancy, just some DOM manipulation. Everything was working fine and then all the scripts magically stopped working. Upon looking into firebug, it seems as though this script is working fine:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
These two references, however, don't seem to load up at all anymore:
<script src="/Bootsrap/bootstrap.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
custom.js is in the root directory and the other is in a Bootstrap folder. Everything was fine yesterday until it wasn't and I can't get it to work again.
function betterWork(this) {
if(confirm("Is this your final selection?"))
{
// document.location = '#';
$("#myModal").modal("show");
}
}
function youCantDoThat() {
alert("That isn't a Pokemon ya doof.");
}
function tooDamnBad() {
var changeText = document.getElementById("textToChange");
var newText = document.getElementById("newText");
changeText.innerHTML = "Too Damn Bad!";
newText.innerHTML = "Pick One Anyways :)";
}
.imageSize {
width: 400px;
height: 400px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS Project</title>
<link rel="stylesheet" href="Bootstrap/bootstrap.css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="col-lg-12">
<h1 class="text-center" id="textToChange">Pick A Starter Pokemon</h1>
<h3 id="newText" class="text-center"></h3>
</div>
<div class="col-lg-12">
<div id="img" onclick="betterWork()" class="imageSize col-lg-4">
<img class="imageSize" src="http://assets19.pokemon.com/assets/cms2/img/pokedex/full//001.png" />
</div>
<div id="img" onclick="betterWork()" class="imageSize col-lg-4">
<img class="imageSize" src="http://vignette3.wikia.nocookie.net/pokemon/images/1/13/007Squirtle_Pokemon_Mystery_Dungeon_Explorers_of_Sky.png/revision/latest?cb=20150105230449" />
</div>
<div id="img" onclick="betterWork()" class="imageSize col-lg-4">
<img class="imageSize" src="http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png" />
</div>
<div id="img3" onmouseover="youCantDoThat()" class="imageSize col-lg-4">
<img class="imageSize" src="http://41.media.tumblr.com/c38fff03b8dd7aaf75037eb18619da57/tumblr_n436i3Falo1sndv3bo1_1280.png" />
</div>
<div id="img4" onclick="betterWork()" class="imageSize col-lg-4">
<img class="imageSize" src="http://assets.pokemon.com/assets/cms2/img/pokedex/full/010.png" />
</div>
<div id="img5" onclick="betterWork()" class="imageSize col-lg-4">
<img class="imageSize" src="http://vignette2.wikia.nocookie.net/camphalfbloodroleplay/images/7/77/Pikachu.png/revision/latest?cb=20141004224742" />
</div>
<br />
<div class="text-center">
<button type="button" class="btn btn-info btn-lg" onclick="tooDamnBad()">I Don't Like These Pokemon</button>
</div>
</div>
<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/Bootsrap/bootstrap.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
</body>
</html>
Diagnosing why a script is not loading should begin with opening your console, looking at the resources tab, and determining whether and why the browser had an error loading the script.
Alternatively you can open the script from your browser directly and your webpage will notify you. For example, if your script is located at the path /Bootstrap/bootstrap.js and your host name is localhost, navigate to localhost/Bootstrap/boostrap.js.
Interpreting the results:
if the result is a 403 error it means that your webserver is not able to open this file. You will need to grant read access to your webserver.
if the result is a 404 error it means that the file is actually not at the path you specified. You will need to debug step by step and figure out why. An additional stack overflow question may resolve this if needed.
if the result is a different error, the meaning of it can be googled and you can comment and ask for additional clarification
I'm creating vertical menu for my asp.net mvc 4 web application.
so I referred this Link to integrate to my matter .
so I edited my _HECLayout.cshtml (that contains in “~/Views/Shared/”) file Like this
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src='~/Scripts/jquery-2.0.0.min.js'/></script>
<link href="~/Content/font-awesome.min.css" rel="stylesheet" />
<link href="~/Content/font-awesome.css" rel="stylesheet" />
<link href="~/Content/css.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$('ul.formxd li a').click(
function (e) {
e.preventDefault(); // prevent the default action
e.stopPropagation; // stop the click from bubbling
e.stopPropagation; // stop the click from bubbling
$(this).closest('ul').find('.selected').removeClass('selected');
$(this).parent().addClass('selected');
});
});
</script>
<meta charset="utf-8" />
<title>#ViewBag.Title - Higher Education Council</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<div id="header">
<div id="top-area">
<div id="logo-area">
<img src="~/Images/hec-logo.png" />
</div>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-right">
<section id="text-view" style="display: inline; width: 100%; text-align: right;" >
<p><i>Higher Education Institutes </i></p>
</section>
</div>
</div>
</header>
#RenderSection("featured", required: false)
<div id="menu_area">
<div class="hec_admin_menu" >
<ul class="formxd">
<li class="welcome"><a class="welcome"><i class="icon-fa-university"></i>Welcome HEC</a></li>
<li ><a class="dashboard" href="#"><i class="icon-dashboard"></i>Dashboard</a></li>
<li ><a class="reports" href="#"><i class="icon-file"></i>Reports</a></li>
<li><a class="administrator" href="#"><i class="icon-user"></i>Administrator</a></li>
<li><a class="search" href="#"><i class="icon-search"></i>Search</a></li>
<li><a class="logout" href="#Url.Action("Login", "HECAccount")"><i class="icon-signout"></i>Logout</a></li>
</ul>
</div>
<div class="hec_admin_body">
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
</div>
<footer>
</footer>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
</html>
It's giving smooth view like the demo which I mentioned HERE , but logout url action not working properly.And all the urls not working properly ,
Any suggestion to overcome with his probblem
<li><a class="logout" href="#Url.Action("Login", "HECAccount")"><i class="icon-signout"></i>Logout</a></li>
I got same error when I trying to insert jquery reference like above , links doesn't working
So I referred This Link
That's an approach to give jquery reference to HTML Page , but in CSHTML when you insert #Scripts.Render("~/bundles/jquery") you don't need add one by one references like you done here ,
So remove <script type="text/javascript" src='~/Scripts/jquery-2.0.0.min.js'/></script>
keep #Scripts.Render("~/bundles/jquery") under the code
If your project doesn't have the "jquery-2.0.0.min.js" file , manually insert into "~/Script" Folder
I know that stackOverflow already has many questions about Blueimp Photo Gallary, but my problem is so basic that I couldn't find an answer, that's why I came asking.
I can't set the Blueimp, I already followed the github's steps but it doesn't work at all. Besides that I would like to get the images url from my flickr, is that possible? I think it is but I don't know how.
I would be really glad if someone could help me out.
Thanks a lot.
<html lang="en">
<head>
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<meta charset="utf-8">
<title>blueimp Gallery</title>
<link rel="stylesheet" href="css/blueimp/blueimp-gallery.min.css">
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
</head>
<body>
<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<div id="links">
<a href="img/surf/1.jpg" title="Banana">
<img src="img/surf/1.jpg" alt="Banana">
</a>
<a href="img/surf/1.jpg" title="Banana">
<img src="img/surf/1.jpg" alt="Banana">
</a>
<a href="img/surf/1.jpg" title="Banana">
<img src="img/surf/1.jpg" alt="Banana">
</a>
</div>
</body>
<script src="js/blueimp/blueimp-gallery.min.js"></script>
</html>
Load jquery before blueimp-gallery.js.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/blueimp/blueimp-gallery.min.js"></script>
And check Chrome console for any errors.
It may be very silly question, I am new in javascript ,I Making a gallery using http://photoswipe.com/ js library ,I download js library from official site , I used given example index.html page
Normal working fine. But my problem when I append div $('.gallery-row').append('<div class="gallery-item"><img src="images/thumb/003.jpg" alt="Image 003" /></div>'); on <div class="gallery-row"></div> using jquery append method from load function.
My problem : image show but when I click on the image then it not open with swipe div .
I waste my whole day but didn't get anything.
my code:
<!DOCTYPE html>
<html>
<head>
<title>PhotoSwipe</title>
<meta name="author" content="Code Computerlove - http://www.codecomputerlove.com/" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<link href="styles.css" type="text/css" rel="stylesheet" />
<link href="photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="lib/simple-inheritance.min.js"></script>
<script type="text/javascript" src="code-photoswipe-1.0.11.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
// Set up PhotoSwipe with all anchor tags in the Gallery container
document.addEventListener('DOMContentLoaded', function(){
Code.photoSwipe('a', '#Gallery');
}, false);
function load(){
//append div from this function
$('.gallery-row').append('<div class="gallery-item"><img src="images/thumb/003.jpg" alt="Image 003" /></div>');
}
</script>
</head>
<body onLoad="load()">
<div id="Header">
<img src="images/codecomputerlovelogo.gif" width="230" height="48" alt="Code Computerlove" />
</div>
<div id="MainContent">
<div class="page-content">
<h1>PhotoSwipe</h1>
</div>
<div id="Gallery">
<div class="gallery-row">
<!--
<div class="gallery-item"><img src="images/thumb/001.jpg" alt="Image 001" /></div>
<div class="gallery-item"><img src="images/thumb/002.jpg" alt="Image 002" /></div>
<div class="gallery-item"><img src="images/thumb/003.jpg" alt="Image 003" /></div>
-->
</div>
</div>
</div>
</body>
</html>
Try doing the append in the DOMContentLoaded handler, before you call Code.photoSwipe. Also, jQuery provides a shorter way to write this:
<script>
$(function() {
$('.gallery-row').append('<div class="gallery-item"><img src="images/thumb/003.jpg" alt="Image 003" /></div>');
Code.photoSwipe('a', '#Gallery');
});
</script>
When you do this, remove onload="load()" from your <body> tag.
Perhaps it's the extra space in the href for your a tag? Try changing "images/full /003.jpg" to "images/full/003.jpg"
I guess, you need to do this :
document.addEventListener('DOMContentLoaded', function(){
Code.photoSwipe('a', '#Gallery');
}, false);
After the append
After some Test, DOMContentLoaded is fired before onload
Can someone please tell me why the countdown function is not working properly (the countdown is not starting in the div with the I.D. "countdown"). Probably something real simple, but Javascript isn't my forte. This is the countdown plugin I am using: http://keith-wood.name/countdown.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="./css/web-style-second.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="chrome://mozbar/skin/css/injected.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
</head>
<body>
<a name="top"></a>
<div id="container">
<div id="content">
<div class="center">
<center>
<div></div>
</center>
</div>
<script type="text/javascript">
$(function() {
$('#countdown').countdown({
until: '14min+20sec',
format: 'MS',
layout: '{mnn}min ' + '{snn}sec ',
onExpiry: function() {
$(".hidden").css("display", "block");
}
});
});
</script>
<div class="time_box">
<h3 class="italic">When The Clock Hits Zero ... </h3>
<h4 class="hasCountdown" id="countdown">14min 20sec </h4>
</div>
<form name="signupFrm" id="signupFrm" action="#" method="post" class="hidden">
<div>
<div class="yellow_red">
<h1></h1>
</div>
<div class="center">
<a href="https://www.testing.com" class="btn_buy_now">
Get Started</a>
</div>
<input name="submit" value="submit" type="hidden">
<p class="mb_5"> </p>
</div>
</form>
<div class="fnote justify">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
You should put the $(function () ...) script into the <head> tag of your HTML page. This way, the countdown will be initiated once the DOM has fully loaded.
I think that the problem is that you are missing the reference to the "jQuery Countdown CSS". In the usage instructions of the plugin it says:
Download and include the jQuery Countdown CSS and JavaScript in the
head section of your page. #import
"jquery.countdown.css";
But you can still make it work without the "jQuery Countdown CSS" if you remove the class attribute from the <h4> element with the id "countdown", like this:
<div class="time_box">
<h3 class="italic">When The Clock Hits Zero ... </h3>
<h4 id="countdown">14min 20sec </h4>
</div>
JSFiddle Example
The countdown plugin uses the class hasCountdown to test whether the countdown has already been instantiated, so you should use a different class name.
From jquery.countdown.js:
/* Class name added to elements to indicate already configured with countdown.*/
markerClassName: 'hasCountdown'