i read a lot of similar topics and created a code that is suppose when i click on a button with class - __mPS2id - to remove "opened" in my open menu with class "menu_mobile" but i dont work. Can someone say what is wrong?
jQuery('.__mPS2id').on('click', function(e) {
$('.menu_mobile').removeClass('opened');
});
My html is
<div class="menu_mobile scheme_dark opened">
<div class="menu_mobile_inner">
<a class="menu_mobile_close icon-cancel"></a>
<nav class="menu_mobile_nav_area">
<ul id="menu_mobile" class="menu_mobile_nav">
<li id="menu_mobile-item-1291" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1291"><span>Начало</span></li>
<li id="menu_mobile-item-1545" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1545"><span>Профиль услуг</span></li>
<li id="menu_mobile-item-1539" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1539"><span>Готовые проекты</span></li>
</ul></nav>
i found 2 solutions! Installed Custom JavaScript plugin and created those 2 codes, both work
jQuery(document).ready(function($) {
$('.menu-item-object-custom').on('click touchend', function() {
$('.menu_mobile').removeClass('opened');
});
});
and
jQuery(document).ready(function($) {
$('.__mPS2id').on('click touchend', function() {
$("a.menu_mobile_close").trigger('click');
});
});
Related
I am new in Cheerio js just want to iterate a specific li from the website li looks like the following
<li class="webcam">
<a href="/en/webcam/italia/lazio/roma/roma-colosseo.html">
<span class="inner-wrapper">
<span class="img-wrapper"><span class="label label-info lb_sm" style="position:absolute;">World
Wonder</span>
<img src="https://static.skylinewebcams.com/live1151.jpg"
data-original="https://static.skylinewebcams.com/live1151.jpg" alt="Italy - Rome - Colosseum"
class="lazy" style="display: inline;" width="318">
</span>
<span class="title">Italy - Rome - Colosseum</span>
<span class="description">Rome, view of the Colosseum and the ruins of the gladiator gymnasium</span>
</span>
</a>
</li>
I want to get href from a tag, data-original from img tag and .title from span tag.
Here is what I tried so far but didn't get any success,
this is the example of finding only with specific tag,
I didn't know how to find all my required thing in one go using cheerio.
request(url, (err, body) => {
if (err) { console.log(err); return; }
$ = cheerio.load(body);
links = $('img[class=lazy]'); //jquery get all hyperlinks
$(links).each(function (i, link) {
console.log(i, link.attribs.alt);
console.log(i, link.attribs.data-original);
});
})
Any help will be appreciated thanks
You want to iterate the lis not the imgs:
let data = $('li.webcam').get().map(li => {
return {
href: $(li) .find('a').attr('href'),
'data-original': $(li).find('img').attr('data-original'),
title: $(li).find('span.title').text()
}
})
So I am using Meteor/React, but I used Blaze's login template for its convenience. It works great on the homepage, but when I try to login from any other page on the site, the page reloads and the login appears to have been unsuccessful.
This is my implementation.
AccountsUI.jsx
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
export class AccountsUI extends React.Component {
componentDidMount(){
this.view = Blaze.render(Template.loginButtons, this.refs.loginContainer);
}
componentWillUnmount(){
Blaze.remove(this.view);
}
render(){
return(
<span ref="loginContainer" />
)
}
}
mainLayout.jsx
<div className="container-fluid">
<a className="navbar-btn pull-left panel-body"><b>FAQ</b></a>
<a className="navbar-btn pull-right panel-body"><b>Category</b></a>
<a className="navbar-btn pull-right panel-body"><b>Notifications</b></a>
<a className="navbar-btn pull-right panel-body"><b><AccountsUI /></b></a>
</div>
</div>
Why would this work only on certain pages?
Blaze
Your code looks ok, are you importing all components correctly?
Try: https://atmospherejs.com/gadicc/blaze-react-component
and do:
import Blaze from 'meteor/gadicc:blaze-react-component';
....
<a className="navbar-btn pull-right panel-body"><b><Blaze template="loginButtons" /></b></a>
....
Without trying to change your choice of tools too much, I have been exploring React, Meteor and Authentication for a little while, often getting stuck in state management and other dark holes. Below is a overview of some options:
React Accounts-UI package
Personally as a quick tool I am a big fan of the React Accounts-UI package https://atmospherejs.com/std/accounts-ui
It's easy to implement and has many React specific config options.
Check out 'Create your own styled version' to implement in Navbar at https://github.com/studiointeract/accounts-ui/blob/master/README.md
React with Kadira FlowRouter and ReactLayout
For something within the Navbar, here is a stab with flow router.
From the Meteor Guide User/Authentication section:
While a router is optional and the basic functionality will work without it, it’s also a good idea to pick a router integration:
For Navbar login (Not React Accounts-UI).
You need Flowrouter and Reactlayout
Routes
We create 2 route groups which allow us to build auth logic into Flow router easily:
const publicRoutes = FlowRouter.group( { name: 'public' } );
publicRoutes.route( '/login', {
name: 'login',
action() {
ReactLayout.render( App, {
yield: <Login /> }
);
}
}
);
const authenticatedRoutes = FlowRouter.group( { name: 'authenticated' } );
authenticatedRoutes.route( '/hidden', {
name: 'hidden',
action() {
ReactLayout.render( App, {
yield: <Hidden /> }
);
}
}
);
App:
You can modify this to suit your own setup. The approach here is to grab the reactmeteordata mixing which allows us to test if the user is logged or logging in. The isPublic function allows us to test if the user should be allowed on the current route. The rest should be self explanatory.
App = React.createClass({
mixins: [ ReactMeteorData ],
getMeteorData() {
return {
loggingIn: Meteor.loggingIn(),
hasUser: !!Meteor.user(),
isPublic( route ) {
let publicRoutes = [
'login'
];
return publicRoutes.indexOf( route ) > -1;
},
canView() {
return this.isPublic( FlowRouter.current().route.name ) || !!Meteor.user();
}
};
},
loading() {
return <div className="loading"></div>;
},
getView() {
return this.data.canView() ? this.props.yield : <Login />;
},
render() {
return <div className="app-root">
<AppHeader hasUser={this.data.hasUser} />
<div className="container">
{this.data.loggingIn ? this.loading() : this.getView()}
</div>
</div>;
}
}
);
Header:
Nothing cosmic, we change the brandLink depending on user state. We then check hasUser (passed as a prop from the App component) to change which nav component to display.
AppHeader = React.createClass({
mixins: [ ReactMeteorData ],
getMeteorData() {
return { brandLink: !!Meteor.user() ? '/hidden' : '/login' }; },
render() {
return ( <nav className="navbar navbar-default" role="navigation">
<div className="container">
<div className="navbar-header">
<button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"><span className="sr-only">Toggle navigation</span><span className="icon-bar"></span> <span className="icon-bar"></span><span className="icon-bar"></span>
</button>
<a className="navbar-brand" href={this.data.brandLink}>AuthExample</a>
</div>
{this.props.hasUser ? <AuthenticatedNavigation /> : <PublicNavigation />}
</div>
</nav> );
}
});
AuthenticatedNavigation component :
AuthenticatedNavigation = React.createClass({
currentUserEmail() {
return Meteor.user().emails[0].address;
},
logout( event ) {
event.preventDefault();
return Meteor.logout( () =>
FlowRouter.go( '/login' ) );
},
render() {
return <div id="navbar-collapse" className="collapse navbar-collapse">
<ul className="nav navbar-nav">
<li className={FlowHelpers.currentRoute( 'hidden' )}>Hidden
</li>
</ul>
<ul className="nav navbar-nav navbar-right">
<li className="dropdown">
<a href="#" className="user-profile-toggle dropdown-toggle clearfix" data-toggle="dropdown">{this.currentUserEmail()} <span className="caret"></span>
</a>
<ul className="dropdown-menu" role="menu">
<li>Account Preferences</li>
<li className="logout" onClick={this.logout}>Logout</li>
</ul>
</li>
</ul>
</div>;
}
});
PublicNavigation Component:
PublicNavigation = React.createClass({
render() {
return (
<div id="navbar-collapse" className="collapse navbar-collapse">
<ul className="nav navbar-nav navbar-right">
<li className={FlowHelpers.currentRoute( 'login' )}>
<a href={FlowHelpers.pathFor( 'login' )}>Login</a>
</li>
</ul>
</div> );
}
}
);
Look at https://themeteorchef.com/snippets/authentication-with-react-and-flow-router/ for more details.
I'm working in my Umbraco based website, and I have a page that contains objects arranged in a grid, and the amount of objects is getting bigger so I'll need to create pagination to this page. How can I create the pagination?
I'm new with Umbraco and website development, sorry of this is a stupid question.
Thanks!
Have a look here
#if (Model.HasNext || Model.HasPrevious) {
<nav class="pagination" role="pagination">
#if (Model.HasPrevious) {
<a class="newer-posts" href="#Model.PreviousUrl">
<i class="fa fa-chevron-circle-left"></i> Newer
</a>
}
<span class="page-number">Page #(Model.CurrentPageIndex + 1) of
#Model.TotalPages</span>
#if (Model.HasNext) {
<a class="older-posts" href="#Model.NextUrl">
Older <i class="fa fa-chevron-circle-right"></i>
</a>
}
</nav>
}
This code is from Articulate Blog engine (Umbraco plugin). You must create a custom Pager model.
I have managed to get the code to display list data which is driven from a sharepoint list. The list only contains one column in each row item which is called Title. I need to display the titles through the bxslider, one item per slide.
Usual bxslider html
<ul class="bxslider">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
My html implementing data-bind
<ul class="bxslider" data-bind="foreach: items">
<li data-bind="text: Title"></li>
</ul>
For some reason the 'Titles' are all being generated in one li tag, rather than creating an li tag for each item in the list.
If anyone has come across this problem before or have any advice or suggestions it would be very much appreciated.
View Model
var items = ko.observable();
jQuery(document).ready(function () {
jQuery.getJSON( "ListURLHERE", {}, dataCallBack
);
ko.applyBindings();
});
function dataCallBack(data) {
items(data.d.results);
}
I have found the answer to the problem!
I was initiating the bxslider function before the knockout js code. I had to implement the bxslider function into the dataCallBack function and it worked.
function dataCallBack(data) {
News(data.d.results);
jQuery(document).ready(function(){
jQuery('.bxslider').bxSlider();
});
}
Thanks for your help everyone!
I'm currently trying to integrate spring mvc app using YUI3. I was able to call Spring Controller with static href in jsp through YUI, but script is not getting invoked when trying to invoke dynamically generated href.
<script src="http://yui.yahooapis.com/3.14.1/build/yui/yui-min.js"></script>
<script>
YUI().use('io-form', 'json','datatable','node','tabview',function(Y) {
Y.all('#nav a').on('click', function (ev) {
ev.preventDefault();
//main.load(ev.target.get('href'), '#content');
var href = ev.target.get('href');
var url = href.substring(0,href.indexOf('#'));
var idw = href.substring(href.indexOf('#')+1,href.length);
Y.io(url, {
method: 'GET',
on: {
complete: function(id, response) {
answer = Y.JSON.parse(response.responseText);
Y.log(answer);
var main = Y.one('#'+idw);
var node = main.all('li');
if(node.size()===0){
Y.Object.each(answer, function(item, index){
main.append("<li id='"+item+"' class='api-list-item class'><a href='/YUI-2-Spring/getContactDetails/"+item+".html#"+item+"'>"+item+"</a></li>");
});
}
}
}
});
});
//To call controller on clickin of dynamic links
Y.all('#api-Types a').on('click', function (ev) {
ev.preventDefault();
//main.load(ev.target.get('href'), '#content');
var href = ev.target.get('href');
var neturl = href.substring(0,href.indexOf('#'));
var studId= href.substring(href.indexOf('#')+1,href.length);
Y.io(neturl, {
method: 'GET',
on: {
complete: function(id, response) {
answer = Y.JSON.parse(response.responseText);
Y.log(answer);
var main = Y.one('#api-everything');
var node = main.all('li');
if(node.size()===0){
Y.Object.each(answer, function(item, index){
main.append("<li id='"+item+"' class='module-class'><a href='/YUI-2-Spring/getPersonalDetails/"+item+"/"+contId+"'</a>"+item+"</li>");
});
}
}
}
});
});
});
</script>
The first script I'm using for calling controller on tabview selection .Based on that I'm creating a list of String with href inside <ul id="api-Types" class="apis modules"></ul> field. In the next script, I'm trying to invoke the generated links, but script is not getting executed.
<div class="yui3-u-1-4">
<div id="docs-sidebar" class="sidebar apidocs">
<div id="api-list">
<h2 class="off-left">APIs</h2>
<div id="api-tabview" class="yui3-tabview-content">
<ul id="nav" class="tabs">
<li class="yui3-tab yui3-widget yui3-tab-selected">Elements</li>
<li class="yui3-tab yui3-widget">Contact Details</li>
<li class="yui3-tab yui3-widget">All</li>
</ul>
<div id="yui3-tabview-panel">
<ul id="api-elements" class="apis classes">
<input type="search" id="api-filter" placeholder="Type to filter APIs">
</ul>
<ul id="api-Types" class="apis modules">
<input type="search" id="api-filter" placeholder="Type to filter APIs"></ul>
<ul id="api-everything" class="apis search">
<input type="search" id="api-filter" placeholder="Type to filter APIs">
<li class="message">
Begin typing in the search box above to see results.
</li>
</ul>
</div>
</div>
</div>
This is the dynamic list that got generated got from viewsource:
<ul id="api-Types" class="apis modules yui3-tab-panel yui3-tab-panel-selected" role="tabpanel" aria-labelledby="yui_3_14_1_1_1389513296688_62">
<input type="search" id="api-filter" placeholder="Type to filter APIs"><li class="api-list-item class">ABC</li><li id="BCD" class="api-list-item class">BCD</li><li id="CDE" class="api-list-item class">CDE</li><li id="DEF" class="api-list-item class">DEF</li><li id="EFG" class="api-list-item class">EFG</li><li id="FGH" class="api-list-item class">FGH</li></ul>
When I'm clicking on the links, instead of invoking the script, my controller is getting invoked through Dispatcher servlet.
Any help will be appreciated.
To bind events on dynamically added element on DOM you should use 'delegate' to bind event instead of 'on'. It will work.