I keep getting a Object has no method error when trying to call jwplayer's setup method or bootstraps carousel method.
I do have JQuery installed and it works properly, I can also use JS from bootstrap using data-attributes and regular jQuery works just not with these two.
Here is a fiddle http://jsfiddle.net/S9jDw/
I've been stuck with this for days.
this is my js code
$(document).ready(function() {
jwplayer('.jw-wrapper').setup({
file: 'http://helpsaverosie.ca/Rosie.m4v',
image: 'https://www.longtailvideo.com/content/images/jw-player/lWMJeVvV-876.jpg',
title: 'Rosie',
width: '100%',
aspectratio: '16:9',
mute: 'true',
autostart: 'true'
});
});
and this is my html output
<!DOCTYPE html>
<html class='index'>
<head>
<title>Save Rosie</title>
<meta charset='utf-8'>
<!-- Always force latest IE rendering engine or request Chrome Frame -->
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<!-- Use title if it's in the page YAML frontmatter -->
<link href="/stylesheets/fonts.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/all.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="/javascripts/bootstrap.js" type="text/javascript"></script>
<script src="http://jwpsrv.com/library/Xp3HoLIEEeOyYSIACmOLpg.js" type="text/javascript"></script>
<script src="/javascripts/all.js" type="text/javascript"></script>
<link href='https://s3-us-west-2.amazonaws.com/rosiesdonations/favicon.ico' rel='shortcut icon' type='image/vnd.microsoft.icon'>
<meta content='width=device-width, initial-scale=1' name='viewport'>
<script src=''></script>
</head>
<body>
<div class='wrapper'>
<div id='image-wrapper'>
<aside class='left-side-image'>
<img alt='Side Image Left' src='https://s3-us-west-2.amazonaws.com/rosiesdonations/Rosie_Left.gif'>
</aside>
<aside class='right-side-image'>
<img alt='Right Side Image' src='https://s3-us-west-2.amazonaws.com/rosiesdonations/Rosie_Right.png'>
</aside>
</div>
<div class='container'>
<nav class='row main-header'>
<header class='col-md-12'>
<h1>Help Save Rosie</h1>
</header>
</nav>
<section class='row main-body'>
<div class='col-md-12'>
<div class='jw-wrapper'></div>
<div class='carousel slide' data-ride='carousel' id='main-carousel'>
<div class='carousel-inner'>
<div class='item active'>
<img alt='Rosie Picture one' src='https://s3-us-west-2.amazonaws.com/rosiesdonations/Rosie1.png'>
</div>
<div class='item'>
<img alt='Rosie Picture two' src='https://s3-us-west-2.amazonaws.com/rosiesdonations/Rosie2.jpg'>
</div>
<div class='item'>
<img alt='Rosie Picture three' src='https://s3-us-west-2.amazonaws.com/rosiesdonations/Rosie3.jpg'>
</div>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
It looks like jwplayer is actually expecting the id of the element and not a selector.
Try changing class="jw-wrapper" to id="jw-wrapper" and change your setup method to:
$(document).ready(function() {
jwplayer('jw-wrapper').setup({
file: 'http://helpsaverosie.ca/Rosie.m4v',
image: 'https://www.longtailvideo.com/content/images/jw-player/lWMJeVvV-876.jpg',
title: 'Rosie',
width: '100%',
aspectratio: '16:9',
mute: 'true',
autostart: 'true'
});
});
Related
I'm new to reactjs and I have a problem.
I have a code like this
<body>
<link href="css/rev_css.css" rel="stylesheet" type="text/css"/>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<!-- <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<script src="lib/react.js" type="text/javascript"></script>
<script src="lib/react.min.js" type="text/javascript"></script>
<script src="lib/react-dom.js" type="text/javascript"></script>
<script src="lib/react-dom.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<div id="root">
<!-- This div's content will be managed by React. -->
</div>
<script type="text/babel">
var Counter = React.createClass({
getInitialState: function () {
return { count: 0 };
},
handleClick: function () {
this.setState({
count: this.state.count + 1,
});
},
render: function () {
return (
<div class="header">
<label class="web_name">Revegator</label>
<input class="search_bar" type="search" placeholder="Search here"/>
<div class="box">
<div class="container-4">
<input type="search" id="search" placeholder="Search here" />
</div>
</div>
<div class="menu_items_div">
<a class="menu_items">Home</a>
<a class="menu_items">Profile</a>
<img class="menu_items" src="img/bell.png" alt=""/>
<img class="menu_items" src="img/drop.png" alt=""/>
</div>
</div>
);
}
});
ReactDOM.render(
<Counter />,
document.getElementById('root')
);
</script>
</body>
But the css has not been applied here. How can I load my css file properly? I have been using AngularJS upto now. In angular I could just simply load the css like this
<link href="css/rev_css.css" rel="stylesheet" type="text/css"/>
How can I do this in react?
Add the following line at the TOP of your html ( even before <html> tag ):
<!DOCTYPE html>
Then put, <link > tag inside <head> .
< head>
<!-- -->
<link href="css/rev_css.css" rel="stylesheet" type="text/css" />
</head>
If it does not work, it means you are using wrong path , so , check in the console if css/rev_css.css is not found .
I created a coming soon page for my new portfolio domain, on a local server. When I'm trying to transfer it to my hosting panel on public html, just HTML file are showing but CSS and JS files are not getting included, and they are not working properly.
What do I need to change there for using on live server ?
I uploaded all folders, img, js, css and files.
Here is a link for live preview (Dropbox): Coming_soon_template
Here is my code for local server:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>This site is in under construction</title>
<meta name="description" content="This site for now is in under construction will be live after some days.For more you can knock me on there lover.mahabub#gmail.com">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com /css?family=Lato:400,300,100,300italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="include/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/TimeCircles.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<div id="coming-soon-total">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="header-text">
<span>A creation of Mahbub Rahman**</span>
<h1>Wait for difference!</h1>
<p>Long way to go just keep patience.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="example" data-date="2015-12-23 00:00:00"> </div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="social-area">
<p> Get in touch</p>
<ul class="social-list">
<li>Facebook</li>
<li>Twitter</li>
<li>Skype</li>
<li>whatsapp</li>
<li>gplus</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/TimeCircles.js"></script>
<script type="text/javascript">
$('document').ready(function() {
'use strict';
$(".example").TimeCircles({
start: true,
time: {
Days: {color: "#4A616E"},
Hours: {color: "#5E524A"},
Minutes: {color: "#2E2F2A"},
Seconds: {color: "#9BA7B5"}
},
circle_bg_color: "#7F8382",
bg_width: .8,
});
});
</script>
</body>
</html>
I'm currently working on another mobile website which has the mmenu installed, all works fine as far as the scroll opens to show the menu, but all the menu items are external links. When I tap/click an external link the page will hyperlink to the page selected without closing the menu first. Is there anyway of making the menu close before loading the external links?
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<script type="text/javascript" src="../js/jquery.mmenu.min.all.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="../css/jquery.mmenu.all.css" />
<link type="text/css" rel="stylesheet" href="../css/main.css" />
<script type="text/javascript">
$(document).ready(function() {
$("#menu").mmenu({
classes: "mm-zoom-panels",
counters: true
});
});
</script>
</head>
<body>
<div id="page"><a href="main.asp">
<img border="0" src="../images/header.png" width="100%"></a>
<div class="header">
</div>
<div class="content">
<div align="center">
</div>
</div>
<nav id="menu">
<ul>
<li>Today</li>
<li>Times</li>
<li>Settings</li>
<li>Log out</li>
</ul>
</nav>
</div>
</body>
Thanks in advance!!
try this code
$("#menu").mmenu({
classes: "mm-zoom-panels",
counters: true,
onClick: {
close: true
}
});
for more info see this:-http://mmenu.frebsite.nl/documentation/options/
thanks
I want to display the content of data-title of div with id="shirt" which is Shirt Front and alert when the button checkout is clicked. It does not work.
jQuery snippet:
var bandcolor='';
var facecolor='';
$("#shirt").click(function(){
bandcolor=$("#shirt").data("title");
});
$("#checkout-button").click(function(){
alert(bandcolor);
});
HTML snippet:
<div id="main-container" class="container">
<div id="content">
<div id="fpd">
<div class="fpd-product" id="shirt" data-title="Shirt Front" data- thumbnail="images/hoodie/Black.png">
<img src="images/hoodie/Black.png" data-title="Shirt Front" />
You can check out my web site at http://www.shivsample.comlu.com. The div with id="shirt" is the first image on the left hand panel.
The full html code is as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Fancy Product Designer</title>
<!-- Style sheets -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui- 1.9.2.custom.min.css" />
<link rel="stylesheet" type="text/css" href="css/spectrum.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.fancyProductDesigner.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.fancyProductDesigner-fonts.css" />
<!-- Include js files -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
<script src="js/spectrum.js" type="text/javascript"></script>
<script src="js/hammer.js" type="text/javascript"></script>
<script src="js/jquery.hammer.js" type="text/javascript"></script>
<script src="js/jquery.fancyProductDesigner.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
var bandcolor='';
var facecolor='';
$("#shirt").click(function(){
bandcolor=$("#shirt").data("title");
});
$("#checkout-button").click(function(){
alert(bandcolor);
});
//call the plugin and save it in a variable to have access to the API
var fpd = $('#fpd').fancyProductDesigner({
editorMode: false,
fonts: ['Arial', 'Helvetica', 'Times New Roman', 'Verdana', 'Geneva', 'Fearless'],
//these are the parameters for the text that is added via the "Add Text" button
customTextParamters: {x: 210, y: 250, colors: "#000000", removable: true, resizable: true, draggable: true, rotatable: true}
})
.data('fancy-product-designer');
});
</script>
</head>
<body>
<div id="main-container" class="container" >
<div id="content">
<div id="fpd" >
<div class="fpd-product" id="shirt" data-title="Shirt Front" data-thumbnail="images/hoodie/Black.png">
<img src="images/hoodie/Black.png" data-title="Shirt Front" />
</div>
<div class="fpd-product" id="shirt2" data-title="Shirt Front1" data-thumbnail="images/hoodie/Camo.png">
<img src="images/hoodie/Camo.png" title="Base Front" />
</div>
<div class="fpd-design">
<img src="images/designs/swirl.png" title="Swirl" />
<img src="images/designs/swirl2.png" title="Swirl 2" />
<img src="images/designs/swirl3.png" title="Swirl 3" />
</div>
</div>
<div class="api-buttons clearfix" style="text-align: right;">
Print
Checkout
<span class="pull-right price badge badge-inverse"><span id="thsirt-price"></span> $</span>
</div>
<div id="thsirt-output" class="output"></div>
</div>
</div>
</body>
</html>
I'm using bootstrap in my application. I'm trying to show a table of contents as tooltip using data-html="true". but its not working.
Here is my code:
<div title="<table><tr><td>Column1</td><td>Value1></td><tr><td>Column2</td><td>Value</td></tr></table>"
data-html="true" rel="tooltip" style="cursor:pointer;"
class="infobox infobox-red infobox-dark " onclick="OpenDetails(this)">
<div class="infobox-icon"><i class="logo-box boa"></i></div>
<div class="infobox-data"><span class="infobox-data smaller">BOA</span>
<div class="infobox-content">(0/0/0/0 )</div>
</div>
</div>
$(function () {
$("[rel='tooltip']").tooltip();
});
function OpenDetails(Obj){
}
Thank you all in advance for your response.
using
data-original-title
Html:
<div rel='tooltip' data-original-title='<h1>big tooltip</h1>'>Visible text</div>
Javascript:
$("[rel=tooltip]").tooltip({html:true});
Just use the following files if you are going to use all bootstrap functions:
-bootstrap.css
-bootstrap.js
using
<script>
$(function () {
$('[rel="tooltip"]').tooltip();
});
</script>
at the end of the body tag (after jQuery and Bootstrap)
Aslo use
title="Column1 | Column2 <br> Value1 | Value2"
instead of
title="<table><tr><td>Column1</td><td>Value1></td><tr><td>Column2</td><td>Value</td></tr></table>"
the final version could be like this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<div
title="Column1 | Column2 <br> Value1 | Value2"
data-html="true"
rel="tooltip"
style="cursor: pointer"
class="infobox infobox-red infobox-dark"
onclick="OpenDetails(this)"
>
<div class="infobox-icon"><i class="logo-box boa"></i></div>
<div class="infobox-data">
<span class="infobox-data smaller">BOA</span>
<div class="infobox-content">(0/0/0/0 )</div>
</div>
</div>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"
></script>
<script>
$(function () {
$('[rel="tooltip"]').tooltip();
});
</script>
-->
</body>
</html>