I'm trying to use INK's sticky js module to work. For some reason, it's just not. I also notice that if I take that <div className="ink-sticky">
<div className="ink-alert basic">Hey I stick to the top when you scroll!</div>
</div>
back out of my react component (and of course changing className to class) and past that directly in my index.html, the sticky works fine.
http://ink.sapo.pt/javascript-ui/#InkUISticky_1
My React Component:
const Content = Component({
render(){
var company = this.props.company;
return (
<div className='content padding-bottom-200 margin-top-50'>
<div className="column-group">
<div className="all-20">
<div className="ink-sticky">
<div className="ink-alert basic">Hey I stick to the top when you scroll!</div>
</div>
</div>
<div className="all-80">
</div>
</div>
</div>
)
}
})
export default Content;
When the page renders, I see that the ink-alert has styled my div but the ink-sticky is doing nothing. I have included the js in my index.html as so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/lib/ink-3.1.10/css/ink-flex.min.css">
<link rel="stylesheet" type="text/css" href="/lib/ink-3.1.10/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/lib/css/master.css" />
</head>
<body>
<div class="wrap">
<div class="ink-grid">
<div id="app"></div>
<script type="text/javascript" src="/scripts/app.bundle.js"></script>
<script type="text/javascript" src="/lib/ink-3.1.10/js/ink-all.min.js"></script>
<script type="text/javascript" src="/lib/ink-3.1.10/js/autoload.min.js"></script>
</div>
</div>
</body>
</html>
This does work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/lib/ink-3.1.10/css/ink-flex.min.css">
<link rel="stylesheet" type="text/css" href="/lib/ink-3.1.10/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/lib/css/master.css" />
</head>
<body>
<div class="wrap">
<div class="ink-grid">
<div class="ink-sticky">
<div class="ink-alert basic">Hey I stick to the top when you scroll!</div>
</div>
<div id="app"></div>
<script type="text/javascript" src="/scripts/app.bundle.js"></script>
<script type="text/javascript" src="/lib/ink-3.1.10/js/ink-all.min.js"></script>
<script type="text/javascript" src="/lib/ink-3.1.10/js/autoload.min.js"></script>
</div>
</div>
</body>
</html>
It probably has to do with the fact that, to make elements sticky, ink-sticky calls some JS to achieve that. Now, when the page just renders, it tries to find sticky elements by class name and automatically make them that, however your sticky elements are not in the HTML. They are dynamically added into the DOM.
Which means, you have to tell ink to make a certain element sticky, manually.
The most appropriate place to do that is in the componentDidMount lifecycle hook.
As far as I can see, Ink does have an API for making elements sticky: http://ink.sapo.pt/javascript/Ink.UI.Sticky/
Ideally, that behavior should be encapsulated into a component of its own:
const Sticky = React.createClass({
componentDidMount() {
const el = ReactDOM.findDOMNode(this);
new Ink.UI.Sticky(el);
},
render() {
return <div>{this.props.children}</div>
}
});
This approach is what's used to bridge other UI libraries with React, not just this one. It can be used for jQuery UI and plugins, and so on, as well.
Related
I am trying to change pages on in my project. I have two divs containing information and they each have a data-role of "page". In addition, they both have ids. On my js file I have a simple onclick event that calls a function that then uses the
$.mobile.changePage("#2");
To go from my first div to my second div. The only problem is whenever I try to change the page I am getting an error:
Uncaught TypeError: Cannot read property 'changePage' of undefined
I have already searched on other peoples posts on stack overflow and haven't found anything that can help me. Here is some of my code:
global.html
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<script src="js/lib/jquery-2.1.4.js"></script>
<link rel="stylesheet" type="text/css" href="css/lib/jquery.mobile-
1.4.5.css">
<script src="js/global.js"></script>
<script src="js/lib/jquery.mobile-1.4.5.js"></script>
<script src="js/p5.min.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js">
</script>
</head>
<body>
<div data-role="page" id="1" style="background-color: #56f0b1;">
<button id ="startGame" type="button">Start Game</button>
</div>
<div data-role="page" id="2" style="background-color: #56f0b1;">
<h2>Page 2 </h2>
</div>
</body>
</html>
global.js
$(document).ready(function () {
$("#startGame").on("click",getToNextPage);
});
function getToNextPage(){
$.mobile.changePage("#2");
}
As mentioned in comments, the core jQuery library must be loaded before jQuery Mobile.
In your code, it seems you're loading two jQuery versions and one of them is loaded after jQuery Mobile.
Also, according to comments in this question, the page IDs should not be only numeric.
Here's an example:
$(document).ready(function() {
$("#startGame").on("click", getToNextPage);
});
function getToNextPage() {
$.mobile.changePage("#page2");
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page" id="page1" style="background-color: #56f0b1;">
<button id="startGame" type="button">Start Game</button>
</div>
<div data-role="page" id="page2" style="background-color: #56f0b1;">
<h2>Page 2 </h2>
</div>
I am implementing an online form-builder type thing. I need to use Jquery-ui drag and drop in angular-dragdrop.
I have two containers, one on the left that keeps all the controls and on the right is the place where I can drop them. Now what I need is I don't want to get removed the original control from left container. I tried simple code uptil now as:
<!DOCTYPE html>
<html ng-app="myapp">
<head lang="en">
<meta charset="utf-8">
<title>Angular drag and drop</title>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet"> -->
<script src="../components/jquery.min.js"></script>
<script src="../components/jquery-ui.js"></script>
<script src="../components/angular.js"></script>
<script src="../src/angular-dragdrop.js"></script>
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" ng-controller="mainCtrl" style="height:600px;">
<div class="col-sm-4" style="background-color:green" data-drag="true" data-drop="false" data-jqyoui-options="{revert: revertCard}" jqyoui-draggable="{animate:true}">
<div>
<button class="btn btn-primary">Hello world</button>
</div>
</div>
<div class="col-sm-8" style="background-color:grey; height:100%" data-drop="true" data-jqyoui-options jqyoui-droppable="{multiple: true}">
</div>
</div>
</body>
</html>
<script>
var app = angular.module('myapp', ['ngDragDrop']);
app.controller('mainCtrl', function ($scope) {
});
</script>
I tried helper:clone in data-jqyoui-options but it did not work. It did not allow me to drag the element. The control is dragged but it comes back to its original place.
Requirement:
I need control to be copied to right container keeping the original.
In my current case my original control can be dragged anywhere on the webpage. I just want to restrict it in it's parent container or the droppable right container.
I can't find a way to change the drawer hamburger icon. Let's the code doing the talk :
THE CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>drawer icon color</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header"></header>
<div class="mdl-layout__drawer"></div>
</div>
</body>
</html>
THE OUTPUT
The icon seems to be added dynamically afterwards with colour set to white :
When I change its colour from my chromium console everything's fine.
But if I try using the css class it doesn't work :
.mdl-layout__header .mdl-layout__drawer-button {
color: #000 !important;
}
MY QUESTION
Do I have any other solutions than changing the colour dynamically through the DOM or directly messing with material.min.js?
(Didn't successfully change the colour using javascript neither)
<script type="text/javascript">
document.querySelector(".mdl-layout__header .mdl-layout__drawer-button").style.color = "red";
</script>
Thanks ! ♫♪ I wish you a merry christmas ♫♪♫
this work
.material-icons {
color: red !important;
}
I have added the i-tag from the material icons to your CSS. This is working fine. See snippet:
.mdl-layout__header .mdl-layout__drawer-button i {
color: #000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>drawer icon color</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header"></header>
<div class="mdl-layout__drawer"></div>
</div>
</body>
</html>
I have a page that is using JavaScript to play mp3 files. The script has its own CSS which controls the look of that specific code. I have another CSS file that controls the look of the overall page. I need this script to fall in my container <div> to keep my pages looking consistent. The script's CSS is correctly altering the JavaScript and the global CSS is also impacting the overall page. The only problem is that the script code ignores the CSS which places it inside the container and content divs. Hence this script shows at the bottom when it should be inside the container before my footer.
How can I get this script to still follow the CSS from the overall page so all my pages are structured the same? When I take out the script code and just type some words, the text shows up in the correct place on the website.
HTML is something like this:
<html>
<head>
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="global.css" />
<link rel="stylesheet" type="text/css" href="plugin/css/style.css">
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="plugin/jquery-jplayer/jquery.jplayer.js"></script>
<script type="text/javascript" src="plugin/ttw-music-player-min.js"></script>
<script type="text/javascript" src="js/myplaylist.js"></script>
</head>
<body>
<div id="container">
<div id="header">
//header code
</div>
<div id="nav">
<ul>
//Navigation code
</ul>
</div>
<div id="content">
<script type="text/javascript">
$(document).ready(function(){
var description = 'Example text'
$('body').ttwMusicPlayer(myPlaylist, {
autoPlay:false,
description:description,
jPlayer:{
swfPath:'plugin/jquery-jplayer'
}
});
});
</script>
</div>
<div id="footer">
Copyright 2016
</div>
</div>
</body>
</html>
I think this is what you're looking for. Place the script tag somewhere other than the content (end of the file is usually good... or in a separate file... your choice) and attach the music player to the #content div:
<head>
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="global.css" />
<link rel="stylesheet" type="text/css" href="plugin/css/style.css">
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="plugin/jquery-jplayer/jquery.jplayer.js"></script>
<script type="text/javascript" src="plugin/ttw-music-player-min.js"></script>
<script type="text/javascript" src="js/myplaylist.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<!-- header code -->
</div>
<div id="nav">
<ul>
<!-- Navigation code -->
</ul>
</div>
<div id="content">
<!-- content goes here -->
</div>
<div id="footer">
Copyright 2016
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var description = 'Example text'
$('#content').ttwMusicPlayer(myPlaylist, {
autoPlay: false,
description: description,
jPlayer: {
swfPath: 'plugin/jquery-jplayer'
}
});
});
</script>
</body>
For some reason, protractor is throwing the error angular never provided resumeBootstrap when navigating to the page using browser.get(). I tried switching data-ng-app to ng-app but that didn't help.
Full Error
Error: Angular could not be found on the page chrome-extension://anmdjkcbefbfgijkigepfecgojdnaida/control.html : angular never provided resumeBootstrap
spec
var driver = browser.driver;
describe('Chrome Extension Control Page', function () {
it('Should be defined', function () {
browser.get('chrome-extension://anmdjkcbefbfgijkigepfecgojdnaida/control.html');
expect(driver.getTitle()).toEqual("Control Page");
expect(driver.executeScript(function () {
return typeof window !== "undefined";
})).toBeTruthy();
element(by.css('input')).click();
});
});
html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Control Page</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-switch.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-theme.css">
<link rel="stylesheet" href="assets/css/navbar.css">
<link rel="stylesheet" href="assets/css/popup.css">
<script src="assets/js/lib/jquery.min.js"></script>
<script src="assets/js/lib/angular.min.js"></script>
<script src="assets/js/lib/bootstrap.min.js"></script>
<script src="assets/js/lib/ui-bootstrap-tpls.min.js"></script>
<script src="assets/js/lib/angular-bootstrap-switch.min.js"></script>
<script src="assets/js/lib/bootstrap-switch.min.js"></script>
<script src="assets/modules/translate-filter.js"></script>
<script src="assets/modules/review-box.js"></script>
<script src="assets/modules/enable-switch.js"></script>
<script src="assets/modules/navbar.js"></script>
<script src="assets/modules/extension-interface.js"></script>
<script src="assets/modules/status-monitor.js"></script>
<script src="assets/modules/state-monitor.js"></script>
<script src="assets/js/control-ui.js"></script>
</head>
<body data-ng-app="controlPage">
<div ng-controller="ControlPageCtrl">
<extension-navbar></extension-navbar>
<div class="">
<div class="jumbotron" style="background-color: transparent; margin-bottom: 0">
<status-monitor-area></status-monitor-area>
<hr>
<div>
<div class="row">
<div class="col-xs-8">
<state-message></state-message>
</div>
<div class="col-xs-4">
<enable-switch></enable-switch>
</div>
</div>
<state-progress-bar></state-progress-bar>
</div>
<state-information-box></state-information-box>
</div>
</div>
</div>
</body>
</html>
EDIT: This did not fix the problem. I have no idea why protractor isn't working.
Weird fix. It worked after I upgraded to the latest version of Angular.
I didn't consider it because the upgrade available was from v1.3.15 to v1.3.16. Seriously weird stuff, Angular.