i want to make a sidebar with some menu and the menu should can drag and drop !
here is the code :
<div class="sidebar" ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="about" draggable="true" ondragstart="drag(event)" id="about">
<div class="top"><p>about us</p></div>
<p class="about"></p>
</div>
<div class="contact" draggable="true" ondragstart="drag(event)" id="contact">
<div class="top"><p>contact us</p></div>
<form class="contact" action="script/mail.php" method="post" target="ifrm">
//Some INPUT
</form>
<div class="clear"></div>
</div>
</div>
the drag and drop is working well now but it's also pussible to drag "about us" and contact us" into eachother or into the form input and i want to disable this !!!
how i sould do this ?
Learn about event bubbling, then check event.target in your drop() and allowDrop() functions.
Related
I want to hide a div element on hover of kendo-menu-item in angular 8.
I want to hide a div whose class is "nav-flyout" on hover of kendo-menu-item "what we do"
Here is the html code
<div class="toolbar navbar" role="banner">
<span><h3>My Project</h3></span>
<div class="spacer"></div>
<kendo-menu class="navbar">
<kendo-menu-item
[cssClass]="'what-we-do'"
text="What We Do"
url="/whatwedo"
></kendo-menu-item>
<kendo-menu-item text="Our Team" url="/ourteam"></kendo-menu-item>
<kendo-menu-item text="Our Work" url="/ourwork"></kendo-menu-item>
<kendo-menu-item text="Resources" url="/resources"></kendo-menu-item>
<kendo-menu-item text="Who Are We" url="/whoarewe"></kendo-menu-item>
</kendo-menu>
<button kendoButton [primary]="true">Let's Talk</button>
<div id="rightSpace"></div>
</div>
<div class="content" role="main"></div>
<div class="mega-nav-contain project-container">
<div id="what-we-do-flyout" class="nav-flyout">
<div class="row-fluid center">
<div class="span4">
<h3 class="loop-title">
<a href="">
<span class="green">Website</span> Design</a>
</h3>
</div>
</div>
</div>
</div>
Any help would be appreciated.
you need to add mouse-eventin kendo-menu-item like:
<kendo-menu-item (mouseover)="yourFun()" text="Our Team" url="/ourteam"></kendo-menu-item>
and in this function yourFun() change display-style , Triggers when cursor is over the mouseover applied element (like hover).
I have dropdown with list of people results.
Each result contain some details.
The demand is that click in each <div class="list-item clearfix">will redirect the user to specific change ' unless the user click on some inner span ( <span class="locationJob">) which redirect him to another page.
<div class="list">
<g:each in="${peopleList?.getResults()}" var="doc">
<div class="list-item clearfix">
<g:link controller="connection" action="details" id="${ApplicationUtils.encodeString(doc.ref?.toString())}">
<div class="avatar">
<span class=""><img src="${doc.avatarUrl}" width="41" alt="Avatar" class="img-circle"/></span>
</div>
<div class="info">some text</div>
<div class="row no-margin body highlight-search-term">
<span class="locationJob">
<g:link controller="profile" action="show" id="${ApplicationUtils.encodeString(profExperienceCompanyIds[index]?.trim())}" class="professional-exp-highlight">
{currentCompany}</g:link>
</div>
</g:link>
</span>
</div>
</g:each>
</div>
I understood that it's not correct to write inside .... So what should I do?
You can replace inside g:link, use input type with onclick method to run remoteFunction:
http://grails.github.io/grails-doc/2.2.1/ref/Tags/remoteFunction.html
I want to insert the name and picture to the side-bar dynamically. I tried this way but it works only for the first page and after navigation to another page, the span and the img tags are both empty:
Jquery:
$(document).on("pageshow", function(e) {
$("#nameFB").text("test");
$('#imgFB').attr('src', 'https://graph.facebook.com/' + fb_id + '/picture');
$('#nav-panel').trigger('create');
});
HTML:
<div id="home" data-role="page" class="ui-responsive-panel" >
<div data-role="header" data-theme="d">
</div>
<div data-role="panel" data-position="left" data-position-fixed="false" data-display="reveal" id="nav-panel">
<a href="Profile.html" data-role="button" id="profile">
<img src="" id="imgFB"/><span id="nameFB"></span> </a><br/>
<a href="Notifications.html" data-role="button" > Notifications </a><br/>
</div>
</div>
Thank you
I am making one android app with help of phonegap.I need help how i can hide the image or show the image when i wanted
when my toggleswitch is off then my image which is in third page should hide if my toggleswitch is on then it will show the image
plz help me out how i can do
In HTML5:-
<div data-role="page" id="page1">
<div data-role="content">
<select name="toggleswitch1" id="toggleswitch1" data-theme="" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<a data-role="button" id="button1" data-inline="true" href="#" onclick="clickfn();">Button</a>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<p>some text</p><p>some text</p>
<a data-role="button" id="button2" data-inline="true" href="#page3" >Button</a>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<p>some text</p><p>some text</p>
<img src="xyz image" />
<a data-role="button" id="button3" data-inline="true" href="#page1" >Button</a>
</div>
in jquery:-
$(document).unbind('pageinit').bind('pageinit', function () {
clickfn();
});
function clickfn(){
$('#button1').click(function(){
if($("#toggleswitch1 option:selected").val() == 'off'){
$.mobile.changePage("#page2");
}else{
$.mobile.changePage("#page2");
}
});
}
there is property called .hide and .show where you can show or hide the images.
Let us say the id of your image is img, then
$('#button).click(function(){
if($("#toggleswitch1 option:selected").val() == 'off'){
$("#img").hide ();
}else{
$("#img").show ();
}
Add a id in your img
<img id="myimg" src="xyz image" />
And swicth the visibility in code
function clickfn(){
$('#button1').click(function(){
if($("#toggleswitch1 option:selected").val() == 'off'){
$("#myimg").hide ();
}else{
$("#myimg").show ();
}
});
}
when I'm using my phone to test the app, I use the back device button to show the previous page this is working with all the pages except one page that shows a not styled page when trying to get to the pervious page so there somthing Odd. Here a briefe explanation.
there is 3 page #main_menu , #first_map , #second_map
when I'm into the #second_map page it should go to the #first_page when I press back button
but actually its showing the #main_menu page with not css styling.
could you plz tell me what is the problem an how we can fix it thank you in advance .
I provide the source code :
this is the main_page
</div>
<h2 id="thx_msg" style="margin:0 auto;"></h2>
<div class="grid2">
<div class="first" id="search_btn">
<div>
<img src="images/loupe.jpg"/>
<div>
</div>Search for a Spot</div>
</div>
<div class="second" id="submit_spot_btn">
<div>
<img src="images/spot.jpg"/>
</div>
<div>Submit a spot</div>
</div>
</div>
<ul style="margin:0 auto;" class="spaced_list" style="widht:280px;" >
<li><input type="button" data-role="none" value="Account info" class="btn" style="margin:0 auto;" id="main_page_account_info"/></li>
<li><input type="button" data-role="none" value="Log Out" class="btn" style="margin:0 auto;"id="main_page_log_out"/></li>
</ul>
</div>
here is the first_map page is named spot_page
<div data-role="page" id="spot_page" data-theme="b">
<div data-role="header" style="overflow:hidden;">
<img class="logo_icon" src="images/logo_icon.png">
</div><!-- header -->
<div class="clear"></div>
<div id="search_form_holder" style="margin:0px 25px" >
<p class="center" style="font-size:16px;font-weight:bold;">
Search for a Spot
</p>
<ul class="some_space" style="margin:0 auto;
margin-left:auto;
margin-right:auto;
align:center;
text-align:center;
width:280px;">
<li><input type="text" id="address_zip" class="field black" placeholder="Address/Zip Code"/></li>
<li id="to"></li>
<li><input type="button" data-role="none" style="width:200px;margin:15px auto;" id="search_spot_btn" class="btn" value="Search for a Spot"></li>
</ul>
<div id="hidden_scroller" style="display:none">
<select id="distance" name="Within">
<option value="1">1 Mile</option>
<option value="3">3 Miles</option>
<option value="5">5 Miles</option>
<option value="10">10 Miles</option>
</select>
</div>
</div><!-- search form -->
<div id="first_map" style="width: 100%;
height: 247px;border:1px solid black;margin:0 auto">
</div>
</div><!-- split view -->
and finally the second map here :
<div data-role="page" id="nearby_page">
<div data-role="header" style="overflow:hidden;">
<img class="logo_icon" src="images/logo_icon.png">
</div><!-- header -->
<div class="clear"></div>
<div class="second_header">Spots nearby</div>
<div id="map" style="width: 100%;
height: 398px;border:1px solid black;margin:0 auto">
</div>
</div>
As you can see the pages are separate from each other.
I have a last question could a navigation plugin help to fix the problem like jquery history plugin and thanks for your help.
Make sure to have your pages on different separate pages. If not these kind of errors will occur. Mostly, you will encounter abnormal navigation error. That is what I have experienced in my experience.
BTW, you should show more of your code for people here to help you out.
Update
PhoneGap and Android's back button do behaves odd. What I have done in my application is disabled the back button and given the soft back button on the top header. Simple history.back() will do the magic for back buttons.
You can disable as follows.
$(function(){
document.addEventListener("deviceready", onDeviceReady, false);
})
// PhoneGap is loaded and it is now safe to call PhoneGap methods
//
function onDeviceReady() {
// Register the event listener
document.addEventListener("backbutton", onBackKeyDown, false);
}
// Handle the back button
//
function onBackKeyDown() {
console.log("Back button pressed but nothing happened");
}
Anyway this is my approach. You may choose to be different.