I'm new here and after learning js i create this monster:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$("#guzik").click(function () {
$("#red").attr('id', ($("#red").attr('id') === 'blue' ? 'red' : 'blue'));
});
});//]]>
</script>
guzik is my button that I want it to change another div with id #red to #blue (toggling) Where are my mistakes? :)
Better way is changing class instead of ID
$("#guzik").click(function () {
$("#div").toggleClass('red blue');
});
.red {background:red}
.blue {background:blue}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
GUZIK
<div id="div" class="blue">CONTENT</div>
Related
I use this code below on my site to open some div's. It works almost perfectly. But when i open a second div I want the other div to close. How can i do this?
<script type="text/javascript">
jQuery(document).ready(function() {
// Hide the div
jQuery('#reveal1').hide();
jQuery('.rv_button1').click(function(e){
e.preventDefault();jQuery("#reveal1").slideToggle();
jQuery('.rv_button1').toggleClass('opened closed');
});
});
jQuery(document).ready(function() {
// Hide the div
jQuery('#reveal2').hide();
jQuery('.rv_button2').click(function(e){
e.preventDefault();jQuery("#reveal2").slideToggle();
jQuery('.rv_button2').toggleClass('opened closed');
});
});
jQuery(document).ready(function() {
// Hide the div
jQuery('#reveal3').hide();
jQuery('.rv_button3').click(function(e){
e.preventDefault();jQuery("#reveal3").slideToggle();
jQuery('.rv_button3').toggleClass('opened closed');
});
});
</script>
start html ----------------------
div id="pageWrapper"> //page wrapper
<div id="page-image"><img src="./images/lightHouseB.png"></div>
<div id="man-image"><img src="./images/sailor.png"></div>
<section>
<header>There Are Things in the Dark, can you Find them? </header>
<!-- basic html title page -->
<div id="textBox">
<a id="mousee" href="#">Hidden Ships</div></a>
</div>
</section>
html end point -----------------------------------
window.onload = eventMonitor();
function eventMonitor(){
document.getElementById('manimage').addEventListener('onmouseover', popMap(), false);
document.getElementById('mousee').addEventListener('click', shipsSlider(), false);
function popMap(url='shipsSlide.html',windowName, w, h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
return window.open(url=" ", "Ship Pictures", toolbar='no', directories="no", status='no');
}
keep getting a null value - can not read property of eventlistener of null.
You need to reference the function to window.onload, and it will be called once the window loads.
See the difference here.
window.onload = onload;
function onload(){
console.log('DOM loaded');
}
And here I am referencing whatever onload will return, in this case a function.
window.onload = onload(); // This will return the anonymous function of onload
// __________________|^^|
function onload(){
return function(){
console.log('DOM loaded');
}
}
So what you want to do is to remove () so your code becomes:
window.onload = eventMonitor; // eventMonitor will be run once windows loads.
I'm trying to wrap Semantic UI Modal component using portal approach described here
Here is my take at it http://jsfiddle.net/mike_123/2wvfjpy9/
I'm running into issue though, when obtaining a DOM reference and Rendering new markup into it there seem to be old reference still maintained.
render: function() {
return <div className="ui modal"/>; <-- the idea at first was to only return <div/>
},
...
React.render(<div > <----------- originally this element had className="ui modal", but this.node doesn't seem to overtake the original node reference
<i className="close icon"></i>
<div className="header">test</div>
<div className="content">
{props.children}
</div>
</div>, <-----------
this.node);
Any pointers how fix this test case http://jsfiddle.net/mike_123/2wvfjpy9/
You will lose correct vertical positioning and probably animations with approaches mentioned above.
Instead, you can just place your modal's component inside your app's root component and call .modal() with detachable: false. With this option, semantic wouldn't make any DOM manipulations and you won't lose your React DOM event listeners.
Example using Webpack/Babel:
import React, { Component } from 'react'
import $ from 'jquery'
if (typeof window !== 'undefined') {
window.jQuery = $
require('semantic-ui/dist/semantic.js')
}
class App extends Component {
state = {
showModal: false
}
_toggleModal = (e) => {
e.preventDefault()
this.toggleModalState()
}
toggleModalState = () => {
this.setState({ showModal: !this.state.showModal })
}
render() {
return (
<div>
<a href="" onClick={this._toggleModal}></a>
{this.state.showModal
? <Modal toggleModalState={this.toggleModalState}/>
: ''}
</div>
)
}
}
class Modal extends Component {
componentDidMount() {
$(this.modal)
.modal({ detachable: false })
.modal('show')
}
componentWillUnmount() {
$(this.modal).modal('hide')
}
_close = (e) {
e.preventDefault()
alert("Clicked")
this.props.toggleModalState()
}
render() {
return (
<div ref={(n) => this.modal = n} className="ui modal">
<div class="content">
<a onClick={this._close} href="">Click Me</a>
</div>
</div>
)
}
}
When you call this.$modal.modal('show'), it will actually restructure your DOM, and React will not be happy about it. Plus, if you try to put control in your modal, the control will not work.
What you should do is to React.render an already shown modal, i.e. a modal with markup as if $('.ui.modal').modal('show') has been called.
Here is my attempt using "React-Portal" to help with rendering a react component at body level. You can still use your method if you prefer.
// modal.jsx
import React, { Component } from 'react';
import Portal from 'react-portal';
class InnerModal extends Component {
constructor(props) {
super(props);
this.state = { modalHeight: 0 };
}
componentDidMount() {
let modalHeight = window.$('#reactInnerModal').outerHeight();
this.setState({modalHeight: modalHeight});
}
render() {
return (
<div id='reactInnerModal' className='ui standard test modal transition visible active' style={{'margin-top': - this.state.modalHeight / 2}}>
<i className='close icon' onClick={this.props.closePortal}></i>
{this.props.children}
</div>
);
}
}
class Modal extends Component {
render() {
let triggerButton = <button className='ui button'>Open Modal</button>;
return (
<Portal className='ui dimmer modals visible active page transition' openByClickOn={triggerButton} closeOnEsc={true} closeOnOutsideClick={true}>
<InnerModal>
{this.props.children}
</InnerModal>
</Portal>
);
}
}
export default Modal;
Notice that my modal has already been rendered in the markup.
You can then consume the modal as below:
// index.jsx
import React, { Component } from 'react';
import Modal from './modal';
class ModalDemo extends Component {
render() {
return (
<Modal>
<div className='header'>
Profile Picture
</div>
<div className='image content'>
<div className='ui medium image'>
<img src='http://semantic-ui.com/images/avatar2/large/rachel.png' />
</div>
<div className='description'>
<div className="ui header">We've auto-chosen a profile image for you.</div>
<p>We've grabbed the following image from the <a href='https://www.gravatar.com' target='_blank'>gravatar</a> image associated with your registered e-mail address.</p>
<p>Is it okay to use this photo?</p>
</div>
</div>
<div className='actions'>
<div className='ui black deny button'>
Nope
</div>
<div className='ui positive right labeled icon button'>
Yep, that's me
<i className='checkmark icon'></i>
</div>
</div>
</Modal>
);
}
}
React.render(<ModalDemo />, document.getElementById('content'));
With this you don't have to hack your way into DOM manipulation with jQuery, and the control in the modal (button, link, etc, to invoke functions) still works.
Hope this help!
Khanetor answered this question thoroughly and correctly, I just want to contribute one additional tidbit about how to position the Modal. It would be best as a comment, but unfortunately, I don't have the reputation to do so.
Anyways, the first child element of the Portal element needs to be positioned absolutely in order to make the dimmer and resulting modal sit on top of the page content rather than get put beneath it.
First, add style={position:'absolute'} to the Portal declaration in Modal's render method so the dimmer gets set at the top of the page. You end up with:
<Portal className='ui dimmer modals visible active page transition' openByClickOn={triggerButton} closeOnEsc={true} closeOnOutsideClick={true} style={position:'absolute'}>
<InnerModal>
{this.props.children}
</InnerModal>
</Portal>
Next, set the InnerModal's position to relative and decide on a distance from the top of the screen. I used an eighth (or 0.125) of the browser's viewport and got:
class InnerModal extends Component {
constructor(props){
super(props);
this.state = {
modalId : _.uniqueId('modal_'),
style: {}
}
}
componentDidMount() {
this.setState({
style : {
position : 'relative',
top : $(window).height() * 0.125 + 'px'
}
});
}
render(){
return (
<div id={this.state.modalId} className='ui standard modal transition visible active'
style={this.state.style}>
<i className='close icon' onClick={this.props.closePortal}></i>
{ this.props.children }
</div>
);
}
}
With those edits made, I've finally got some working modals in React! Hope this is helpful to someone else running into some of the same issues I've been.
i am new to Zend framework and dojo.i have created dynamic tree structure using dojo in zend framework but i want to make on click of each folder and element of tree structure to naigation to another form by writing a function .Pleas check my code and help me i have gone through some dojo on click event link and could not solve ..
<html>
<head>
<title> Tree Structure </title>
<link rel="stylesheet" href=/dojo/dijit/themes/ claro/claro.css" />
<script type="text/javascript" src="/ dojo/dojo/dojo.js"
djConfig="parseOnLoad:true, isDebug:true" >
</script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer")
dojo.require("dijit.form.Button");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.tree.ForestStoreModel");
dojo.require("dijit.Tree");
dojo.require("dojo.parser");
function myTree( domLocation ) {
var store = new dojo.data.ItemFileReadStore({url: "http://localhost/CMTaSS_module1.0/public/dojo/cbtree/datastore/Family-1.7.json"});
var treeModel = new dijit.tree.TreeStoreModel({
store: store,
query: { name:'John'}
});
var tree = new dijit.Tree( {
model: treeModel,
id: "mytree",
openOnClick: true
});
tree.placeAt( domLocation );
}
var tree_obj = new dijit.Tree({
model: treeModel
},
"tree_obj");
dojo.connect(tree_obj, 'onClick', function(item, node, evt){
console.log("Item", item);
console.log("Node", node);
console.log("Event", evt);
//console.log('node: ' +tree_obj.getLabel(node));
//console.log('event: ' +tree_obj.getLabel(evt));
console.log('identifier: ' + tree_obj.getLabel(item))
});
</script>
</head>
<body class="claro"><br><br><br>
<div id="CheckboxTree">
<script type="text/javascript">
myTree("CheckboxTree");
</script>
</div>
</body>
</html>
Looks like your code sample is not formatted correctly as some of the logic is outside the myTree function. I used jsbeautifier.org to confirm this.
Other notes...
You should wait until dojo is ready. Either use dojo.addonload or, create a widget and reference that widget in the html portion of your code. Widgets are amazing and are what make dojo great, so getting a grasp on how they work will pay dividends.
Also note that if creating a widget programmatically (new dijit.Tree), you should call startup on it. This is not needed when creating it declaratively (inline html).
I hope this helps.
Is there an example on how to implement Drag and Drop with Ember.js ? I have tried using jQuery UI, but the integration seems to be somewhat complex.
I've seen this jsFiddle: http://jsfiddle.net/oskbor/Wu2cu/1/ but haven't been able to implement this successfully in my own app.
What are the options for a rather simple drag&drop implementation using Ember.js ?
I took a look at the post by Remy Sharp and implemented a basic example in Ember.js, see http://jsfiddle.net/pangratz666/DYnNH/.
Handlebars:
<script type="text/x-handlebars" >
Drag and drop the green and red box onto the blue one ...
{{view App.Box class="box green"}}
{{view App.Box class="box red"}}
{{view App.DropTarget class="box blue"}}
</script>
JavaScript:
DragNDrop = Ember.Namespace.create();
DragNDrop.cancel = function(event) {
event.preventDefault();
return false;
};
DragNDrop.Dragable = Ember.Mixin.create({
attributeBindings: 'draggable',
draggable: 'true',
dragStart: function(event) {
var dataTransfer = event.originalEvent.dataTransfer;
dataTransfer.setData('Text', this.get('elementId'));
}
});
DragNDrop.Droppable = Ember.Mixin.create({
dragEnter: DragNDrop.cancel,
dragOver: DragNDrop.cancel,
drop: function(event) {
var viewId = event.originalEvent.dataTransfer.getData('Text');
Ember.View.views[viewId].destroy();
event.preventDefault();
return false;
}
});
App.Box = Ember.View.extend(DragNDrop.Dragable);
App.DropTarget = Ember.View.extend(DragNDrop.Droppable);