UPDATE: By locally when I preview my work in the browser. My files are stored in the same folder structure on one of our severs.
UPDATE: Which jpeg reference do you mean? Is this before I try your way of doing it?
UPDATE: this page doesn't load comments or answers so I'll be posting my answers here.
UPDATE: the console does say that the files are missing, but they're not. The site files in their entirety have been uploaded several times. I can provide a screenshot of the folder within the sever if need be.
I have a background video inserted into my index page but it doesn't play once the site is live. I believe it uses the image fallback. It works fine locally but having problems with absolute urls. I downloaded this from github and the update for this problem is below but the package I downloaded was a newer version anyways. Test link is below the github link.
https://github.com/VodkaBears/Vide/archive/0.1.1.zip#
http://bit.ly/1xLpFiu
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Pragma" content="no_cache" />
<title>M&T Printing Group</title>
<link rel=”author” href=”https://plus.google.com/+MTPrintingGroupKitchener“/>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/content.css" />
<link rel="stylesheet" type="text/css" href="css/font.css" />
<link rel="stylesheet" type="text/css" href="QuotesRotator/css/default.css" />
<link rel="stylesheet" type="text/css" href="QuotesRotator/css/component.css" />
<script src="QuotesRotator/js/modernizr.custom.js" type="text/javascript"></script>
<!-- github.com/scottjehl/Respond - for IE 8, 7.... -->
<script src="Respond-master/dest/respond.min.js" type="text/javascript"></script>
<!--<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".subnav").prev().mouseover(function(){
var sub_menu_shift = parseInt($(this).next().css("height")) + 100;
$(this).next().css({'position':'relative','bottom':sub_menu_shift});
});
});
</script>-->
<style>
html, body {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body data-vide-bg="Vide-0.1.2/examples/video/videoMain">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="Vide-0.1.2/src/jquery.vide.js"></script>
<script>window.jQuery || document.write('<script src="Vide-0.1.2/libs/jquery/jquery-1.11.1.min.js"><\/script>')</script>
<script src="Vide-0.1.2/src/jquery.vide.js"></script>
<script>
// $(document).ready(function () {
// $(document.body).vide("Vide-0.1.2/examples/video/videoMain"); // Non declarative initialization
//
// var instance = $(document.body).data("vide"); // Get instance
// var video = instance.getVideoObject(); // Get video object
// instance.destroy(); // Destroy instance
// });
</script>
<div id="indexBG">
<div id="colour-bar-black"></div> <!-- colour-bar-black -->
<div id="nav-wrap">
<ul>
<li id="link-one" class="orange">
<span>Printing</span>
<div class="subnav" id="subnav">
<ul>
<li>Digital Printing</li>
<li>Offset Printing</li>
<li>Business Cards & Stationery</li>
<li>Manuals, Reports & Catalogues</li>
<li>Bindery Services</li>
<li>Canada Post</li>
<li>Graphic Design & Typesetting</li>
</ul>
</div><!-- /.subnav -->
</li>
<li class="red"><span class="doubleLine">Promotional Products</span>
<div class="subnav">
<ul>
<li>Awards & Mounting</li>
<li>Binders</li>
<li>Clothing & Apparel</li>
<li>Bags</li>
<li>Drinkware</li>
<li>Lanyards</li>
<li>Magnets</li>
<li>Pens & Writing Instruments</li>
<li>Presentation Folders</li>
<li>USB Flash Drives</li>
<li>Umbrellas</li>
</ul>
</div><!-- /.subnav -->
</li>
<li class="pink"><span class="doubleLine">Banners & Signage</span>
<div class="subnav">
<ul>
<li>Drafting & CAD services</li>
<li>Coroplast & FoamCore</li>
<li>Retractable Banners</li>
<li>Posters & Banners</li>
<li>Wraps & PVC</li>
<li>Displays & Canvas</li>
</ul>
</div><!-- /.subnav -->
</li>
<li class="purple"><span>POOL</span></li>
<li class="blue"><span>Volumes</span></li>
<li class="green"><span>Contact</span>
<div class="subnav">
<ul>
<li>Locations</li>
<li>Media</li>
<li>Digital Link</li>
<li>FTP site</li>
<li>Client Login</li>
<li>Estimate Request</li>
<li>Submit A File</li>
<li>Recognition</li>
<li>Graphics Factory</li>
<li>Careers</li>
</ul>
</div><!-- /.subnav -->
</li>
<li class="yellow-facebook"><span></span></li>
</ul>
</div> <!-- nav-wrap -->
<div id="logo"><img src="images/logo-main.png" alt="M&T Printing Group" title="M&T Printing Group" /></div> <!-- logo -->
<!-- used for mobile -->
<div id="logo-mobile"><img src="images/M&T-Printing-Group-Logo-moble.jpg" alt="M&T Printing Group" title="M&T Printing Group" /></div> <!-- logo-mobile -->
<h1>“Your Partners In Print”</h1>
<div id="footer">
<ul class="footer-left">
<li>M&T Printing Group - © 2014</li>
</ul>
<ul class="footer-right">
<li>Client Login</li>
<li>Locations</li>
<li>Pool</li>
</ul>
</div> <!-- footer -->
</div> <!-- indexBG -->
</body>
</html>
I would just do something like this, using jquery. You can have the videoURL go to whichever you like and it will load right up. I have done this in the past for several websites and it works wonderfully. The below is just html and JQUERY. Your issue seems to me seems to be were you have the video stored. You said it works fine "locally" Well where are you hosting your webpage? Your video should be stored in the same venue.
<section class="content-section video-section">
<div class="pattern-overlay">
<a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=sd4bqmP_460',containment:'', quality:'large', autoPlay:true, mute:true, opacity:1}">bg</a>
</div>
</section>
$(document).ready(function () {
$(".player").mb_YTPlayer();
});
I see the edit you added. Remove the jpeg or reference the mp4 file.
--Sorry for editing your comment but it's the only way I can respond.Which jpeg reference do you mean?
Related
I am working on an application in Electron, on this page I have put a button however the script does not run when clicked. Any help would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<link class="menu-bar" rel="stylesheet" href="../css/index.css">
<link class="main" rel="stylesheet" href="../css/ceaser.css">
<meta charset="utf-8">
<title>Cipher Program</title>
</head>
<body>
<!-- Navigation Bar -->
<ul class = "menu-bar">
<li> Menu </li>
<li><a class="active" href="ceaser.html">Ceaser Cipher</a></li>
<li>Vernam Cipher </li>
<li>Frequency Analysis</li>
</ul>
<div class="main">
<h1>Ceaser Cipher</h1>
<button type="button" onclick="test()">Click me </button>
<script type="text/javascript">
function test() {
console.log("got this far")
}
</script>
</div>
</body>
Add some cdn for .js to work with javascript library functions as i see theres no library imported to work with javascript like
<script src="your_js/cdn"....></script>
Console.log will display text in a terminal window. If you are trying to display something in a browser you have to change the DOM.
<!DOCTYPE html>
<html>
<head>
<link class="menu-bar" rel="stylesheet" href="../css/index.css">
<link class="main" rel="stylesheet" href="../css/ceaser.css">
<meta charset="utf-8">
<title>Cipher Program</title>
</head>
<body>
<!-- Navigation Bar -->
<ul class = "menu-bar">
<li> Menu </li>
<li><a class="active" href="ceaser.html">Ceaser Cipher</a></li>
<li>Vernam Cipher </li>
<li>Frequency Analysis</li>
</ul>
<div class="main">
<h1>Ceaser Cipher</h1>
<div id="message"></div>
<button type="button" onclick="test()">Click me </button>
<script type="text/javascript">
function test() {
console.log("got this far");
document.getElementById("message").appendChild(document.createTextNode("You see me now"));
}
</script>
</div>
</body>
Simplest way is to create an empty "div" with id of your choosing. Then in javascript use the document object "document" and it's functions like ".write" or ".appendChild" to change the DOM.
You should be able to run the above code in the stack overflow sandbox and see that the output to terminal (console.log) is different than the browser rendered DOM (getElementById("message").appendChild)
your Code should output something in the Browserconsole.
You can open the Developertools afaik with Ctrl+Alt+i.
To output / connect with the Mainapplication you should use IPC.
See: https://electronjs.org/docs/api/ipc-main
Greets
I am converting an HTML & CSS with bits of JS into a WordPress theme. Just a newbie with this practice. I watched and read tutorials. I followed their way. But in this code, the CSS of the WordPress theme doesn't function. I don't know the problem. I used 'inspect element' to see the problem. But it doesn't read the CSS file so that's the problem. But I already included the style.css in the header. What seems to be the problem here?
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php bloginfo('title'); ?></title>
<meta charset="utf-8">
<meta name = "format-detection" content = "telephone=no" />
<link rel="icon" href="images/favicon.ico" />
<link rel="shortcut icon" href="images/favicon.ico" />
<!--<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/grid.css">-->
<link rel="stylesheet" href="<?php get_template_directory_uri(); ?>/style.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.2.1.js"></script>
<script src="js/owl.carousel.js"></script>
<!--[if (gt IE 9)|!(IE)]><!-->
<script src="js/wow/wow.js"></script>
<script>
$(document).ready(function () {
if ($('html').hasClass('desktop')) {
new WOW().init();
}
});
</script>
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<link rel="stylesheet" media="screen" href="css/ie.css">
<![endif]-->
<script>
$(document).ready(function () {
$("#owl").owlCarousel({
items : 1, //10 items above 1000px browser width
itemsDesktop : [995,1], //5 items between 1000px and 901px
itemsDesktopSmall : [767, 1], // betweem 900px and 601px
itemsTablet: [700, 1], //2 items between 600 and 0
itemsMobile : [479, 1], // itemsMobile disabled - inherit from itemsTablet option
navigation : true,
pagination : false
});
});
</script>
<?php wp_head(); ?>
</head>
<body class="page1" id="top">
<div class="main">
<!--==============================
header
=================================-->
<header class="">
<!--==============================
Stuck menu
=================================-->
<section id="stuck_container">
<div class="container">
<div class="row">
<div class="grid_10">
<h1>
<img src="images/logo.png" alt="Logo alt">
</h1>
<div class="navigation">
<nav>
<ul class="sf-menu">
<li class="current">Home</li>
<li>About
<ul>
<li>About</li>
<li>Services</li>
<li>Projects
<ul>
<li>Lorem ipsum</li>
<li>Dolor sit amet</li>
</ul>
</li>
<li>Blog</li>
<li>Contacts</li>
</ul>
</li>
<li>Services</li>
<li>Projects</li>
<li>Blog</li>
<li>Contacts</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</section>
</header>
Styles should be enqueued in the functions.php file.
https://codex.wordpress.org/Function_Reference/wp_enqueue_style
Like JeremyE said, the "WordPress-way" to include JavaScript and CSS assets in a theme is using the wp_enqueue_style and wp_enqueue_script functions. WPBeginner has a great tutorial on how to do it.
But, the issue with your code is this line:
<link rel="stylesheet" href="<?php get_template_directory_uri(); ?>/style.css" />
get_template_directory_uri returns the template URL, but does not echo it. Update the line to this to make it work:
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" />
I have a website I'm creating, still in it's beginning stages. I have it hosted locally, but when I click the links, it says the files cannot be found even though they do in fact exist. Also, the styling won't apply. My index.html is below:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<base href="/">
<title>Sports</title>
<!-- CSS -->
<link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="libs/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="css/style.css"> <!-- custom styles -->
<!-- JS -->
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<!-- ANGULAR CUSTOM -->
<script src="js/controllers/MainCtrl.js"></script>
<script src="js/controllers/TeamsCtrl.js"></script>>
<script src="js/services/TeamsService.js"></script>
<script src="js/appRoutes.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="myApp" ng-controller="MainController">
<div class="container">
<!-- HEADER -->
<nav class="container-fluid navbar navbar-default navbar-fixed-top" role="navigation" ng-controller="HeaderController">
<div class="navbar-header">
<a class="navbar-brand" href="/"><i class="fa fa-home fa-lg"></i>Sports</a>
</div>
<ul class="nav navbar navbar-nav">
<li ng-class="{ active: isActive('/teams') }">Teams</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-user"></i> Log In</li>
</ul>
</nav>
<!-- ANGULAR DYNAMIC CONTENT -->
<div ng-view></div>
</div>
</body>
</html>
The part I do not understand is that this runs fine on my work computer. I zipped it up, sent it to myself at home, and it doesn't run correctly. When I click the Teams link, it takes me here: file:///C:/teams, which isn't correct. I have no idea where to even start looking, as this is my first web project. Any help would be greatly appreciated as to where I should start/what the issue could be. Thank you ahead of time.
use ~ symbol infront of all your links. For example use ~/teams instead of /teams.
~ symbol will take you current folder where the files are located.
I wasn't running a localhost web server on my machine. Once I did, everything worked fine.
This is my first try using bootstrap. I am just trying to get a basic menu bar working. From what I see everything works fine, but just doesnt look ok. I tried to switch out the css with a new download, but still doesnt seem to fix anything.
This is the HTML
<!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">
<title>Test</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<nav class="navbar">
<div class="navbar-inner">
test
<ul class="nav">
<li>Item1</li>
<li class="divider-vertical"></li>
<li>Item1</li>
<li class="divider-vertical"></li>
<li>Item1</li>
<li class="divider-vertical"></li>
<li class="dropdown">
Connect<b class="caret"></b>
<ul class="dropdown-menu">
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Nothing complex. Got the basic structure from Bootstrap website. Just added the new menu.
It looks like this
I have checked the CSS files to be in the right place and also the bootstrap js file.
Add the class navbar-brand to the first 'a' tag
test
And add the class navbar-nav to the first 'ul' tag:
<ul class="nav navbar-nav ">
With these changes the example looks better.
I can't post images yet, but in the next link you can see how the example look after this changes:
I have a mobile web site used with MVC 4.0 Razor Mobile version and HTML 5. When i call a page on browser or submit form page title not shown. Also it comes in view but after 1 second, it is going to null. When clicking a url in page title is coming. How can I stop changing page title to empty?
My layout page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#Html.Raw(ViewBag.Title)</title>
<meta name="description" #Html.Raw("content=\"" + ViewBag.Description + "\"") />
<meta name="keywords" #Html.Raw("content=\"" + ViewBag.Keywords + "\"") />
<meta name="viewport" content="width=device-width" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="/Content/jquery.mobile-1.4.0.min.css" />
<script src="/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.mobile-1.4.0.min.js" type="text/javascript"></script>
#RenderSection("scripts", required: false)
<script src="~/Scripts/myjs.js" type="text/javascript"></script>
<link href="/Content/mycss.css" rel="stylesheet"/>
</head>
<body>
<div data-role="page" data-theme="a" id="layout-page">
<div data-role="header" >
<h1>
<a style="background:none;border:none;" href="http://m.sozcukcevir.com"><img style="height:40px;border:0" src="/Content/images/logo-mobile.png" alt="sözcük çevir" /></a> </h1>
Menu
</div>
<div data-role="content">
#RenderBody()
</div>
<div data-role="panel" id="right-panel" data-display="push" data-position="right" data-theme="a">
<ul data-role="listview" data-inset="true">
<li>Kelime Çeviri</li>
<li>Metin Çeviri</li>
<li data-icon="audio">Okunuşu Dinle</li>
<li data-icon="gear">Ayarlar</li>
<li data-icon="delete">Kapat</li>
</ul>
</div>
<div data-role="footer" data-theme="b">
<div data-role="navbar" data-theme="c">
<ul data-theme="c">
<li data-theme="c">Sözlük</li>
<li data-theme="c">Metin Çeviri</li>
<li data-theme="c">Dinle</li>
</ul>
</div>
</div>
</div>
<script>
$(document).on("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<!-- analytics --><!-- analytics -->
</body>
</html>
Page : http://m.sozcukcevir.com