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
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).
My page is having a dialog and I'm dynamically shows it via javascript. It works fine in IE,FF,Safari but not in chrome and opera. If this is a known bug and has workarounds let me know, I'll post the code if you need more specification.
this is the dialog:-
<div id="infoDialog" data-role="page" data-overlay-theme="b">
<div id="headerConfirmation" data-role="header" data-theme="b">
<h1>Invalid Action</h1>
</div>
<div id="contentConfirmation" data-role="content" data-theme="b">
<p>Please increase the adults count first</p>
<a href='#' onclick='$(".ui-dialog").dialog("close");' data-role='button' data-theme='c'>Close</a>
</div>
this dialog is being loaded into an Iframe's body by this
jQuery.getJSON(url, function(data) {
$("body").html(data["html"]);
and this is how I load it via Javascript
$.mobile.changePage("#infoDialog", { transition: "pop",role: "dialog" });
The code is too much complex to add here this works fine in IE,FF,Safari
Thanks in Advance.
Thought of answering my own question. The problem resolves when I navigate to another page and come back again. Then the dialog closes properly everytime. So I add this code before all jquery mobile library:-
$("#firstLoad").bind("pagecreate",function()
{
$.mobile.changePage("#selectDates");
});
and then add a fake jquery mobile page like this
:-
<div id="firstLoad" data-theme="c" data-role="page" >
<!-- <div id="firstLoadHeader" data-role="header">
<h1>Welcome</h1>
</div>
<div id="contentSelectDates" data-role="content">
</div>
<div id="footerSelectDates" data-role="footer">
<h1>Travel Gateway</h1>
</div> -->
</div>
So my actual page that I want to show comes after this.
:-
<div id="selectDates" data-theme="c" data-role="page">
<div id="headerSelectDates" data-role="header">
<h1>Select Dates</h1>
</div>
<div id="contentSelectDates" data-role="content">
</div>
</div>
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 ();
}
});
}
How do I do this?
A menu with 3 links (A B C).
"A.html" is shown at start.
When link "B" is clicked, "A" is faded out and "B" fades in.
Every time a link is clicked. Content is changed by fadeout and fadein.
If possible I would like the browsers back buttom to work.
<div menu>
<link> A </link>
<link> B </link>
<link> C </link>
</div menu>
<div content>
A
</div content>
Try this: http://jsfiddle.net/fAvcq/9/
HTML
<div id="menu">
A
B
C
</div>
<div id="content">A</div>
CSS
.active {
color: red;
}
JS
$(document).ready(function(){
$('#menu a[class=active]').fadeOut('slow');
$('#menu a').click(function(){
$('#menu a[class=active]').fadeIn('slow');
$('#menu a[class=active]').removeClass();
$(this).addClass('active');
$('#menu a[class=active]').fadeOut('slow');
$('#content').html($(this).html());
});
});
you will need javascript or jquery for that
see your impossible possible below:
place your markup like this
<div class="menu">
<ul>
<li class="active">
<a href="#" > A </a>
<div class="A hidden">
<h1> Hello I am A </h1>
<img src="y.jpg">
</div>
</li>
<li>
<a href="#" > B </a>
<div class="B hidden">
<h1> Hello I am B </h1>
<img src="y.jpg">
</div>
</li>
</ul>
</div>
<div class="content">
</div>
and place a simple jQuery code like this:
//find the changeContent function to the click of anchors
$('a').on('click',function(){
changeContent(this);
});
//load the first content by default
changeContent($('li.active').find('a:first'));
function changeContent(target){
$('li').removeClass('active');
$(target).parent().addClass('active');
$('.content').html($(target).siblings('div').html());
}
TADA!! its done.
see this in live
I have called 2nd page <div id=child> on button click of 1st page <div id = home> and used jquery theme in both pages but the problem is in 2nd page there is no theme effect as in 1st page. I have put the css file in same folder and it is giving effect in 1st page and not in 2nd ?
Can any one solve the problem, so that the theme have effect in 2nd page also? Below is my code
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="jquerybasic/jquerymobilecss.css" />
<style>
/* App custom styles */
</style>
<script src="jquerybasic/jquery.min.js" type="text/javascript">
</script>
<script src="jquerybasic/jquery.mobile-1.1.0.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#buttonid').click(function() {
$('#child').toggle();
$('#home').toggle();
});
$('#buttonchild').click(function() {
$('#child').toggle();
$('#home').toggle();
});
$('#next').click(function() {
$('#home').show();
$('#child').hide();
});
$('#prev').click(function() {
$('#home').hide();
$('#child').show();
});
$('#nextchild').click(function() {
$('#home').show();
$('#child').hide();
});
$('#prevchild').click(function() {
$('#home').hide();
$('#child').show();
});
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-theme="d" data-role="header">
<h3>
The Grand Bhagavati
</h3>
<a data-role="button" id="next" data-inline="true" data-transition="slide" >
<<
</a>
<a data-role="button" id="prev" data-inline="true" data-transition="fade" >
>>
</a>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="textinput1">
User:
</label>
<input id="textinput1" type="text" />
</fieldset>
</div>
<input id="buttonid" data-theme="d" value="Login" type="button" />
</div>
<div data-theme="d" data-role="footer" data-position="fixed" >
<h3>
Page 1
</h3>
</div>
</div>
<div data-role="page" id="child">
<div data-theme="d" data-role="header">
<h3>
The Grand Bhagavati
</h3>
<a data-role="button" id="nextchild" data-inline="true" data-direction="reverse" data-transition="slide" >
<<
</a>
<a data-role="button" id="prevchild" data-inline="true" data-direction="reverse" data-transition="fade" >
>>
</a>
</div>
<div data-role="content">
<label>
hi khushbu. welcome...!
</label>
<input id="buttonchild" data-theme="d" value="Login" type="button" class="ui-btn-hidden" aria-disabled="false" />
</div>
<div data-theme="d" data-role="footer" data-position="fixed" >
<h3>
Page 2
</h3>
</div>
</div>
<script>
//App custom javascript
</script>
</body>
Ok boy :)
It seems you've skipped a rather important part of using a new piece of software, reading the documentation.
To navigate between pages you would just place this in the href attribute for the link:
<a data-role="button" href="#child">...</a>
And jQuery Mobile will handle the transition to the next pseudo-page. Here is the documentation for Linking Pages: http://jquerymobile.com/demos/1.1.0/docs/pages/page-links.html
If you want to do this programatically then you can use $.mobile.changePage() which is what gets used internally. The advantage to manually calling this function (say in a click event handler for a button) is that you can specify non-default options for the transition:
$('#next').on('click', function () {
$.mobile.changePage($('#child'), { transition : 'slide', reverse : true });
});
Here is the documentation for $.mobile.changePage(): http://jquerymobile.com/demos/1.1.0/docs/api/methods.html
If you wanted to roll your own transitions it's quite a bit more complex than showing one div and hiding another. You've got to setup some CSS classes that animate the transition using CSS3 (transform, transition, keyframes, etc.).
And finally, here is a demo of your code where I replaced the links in the header with a single link that works: http://jsfiddle.net/MmKK4/