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 ();
}
});
}
Related
html:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="one">
<p id="drag1" ><img src = "e:\Atom\UI\images\Capture.PNG" alt="home page" /> </p>
<p id="drag2"><img src = "e:\Atom\UI1\images\Capture2.JPG" alt="home page" /> </p>
</div>
</div>
<div class="col-md-8"> <div id="droppable" class="ui-sortable" ><ol></ol></div></div>
</div>
</div>
jquery ui:
$(function() {
$( "#drag1" ).draggable({ appendTo: "body", helper: "clone"});
$( "#drag2" ).draggable({ appendTo: "body", helper: "clone"});
$( "#droppable" ).droppable({
drop: function(event,ui){
});
});
when the image is dropped in the droppable div we should be able to modify the contents of the page(template) dropped that is we can change the title of the page, add/delete textbox, button, label...etc
I have a json inside a ng-init where I have some data and I want to grab these data and paint into a template and I compiled with my directive and I don't have idea what I'm doing wrong. I can not paint json data into the template
example:
<li ng-init="product= {"brand":"Nike", "price":"30€", "mainImage":"images/images.jpg"}>
<div class="content-product>
<div class="product">
<p>Nike </p>
<img src="image.jpg" alt="">
<p>30€ </p>
</div>
</div>
</li>
This li is inside a loop in ruby.
Template where I want to paint the data and compile this template when I click on a button that is inside the li:
<script type="text/ng-template" id="quickpreview.html">
<div class="content-preview">
<div class="content-preview-inner">
<span class="full-preview"></span>
<span class="close-preview"></span>
<div class="block block-left left">
<div class="content-tabs">
<dl class="tabs vertical" data-tab>
<dd class="active">Tab 1
</dd>
<dd>Tab 2
</dd>
<dd>Tab 3
</dd>
<dd>Tab 4
</dd>
<dd>Tab 5
</dd>
</dl>
<div class="tabs-content vertical">
<div class="content active" id="panel1">
<div class="content-img">
<div class="main-img">
<img ng-src="{{product.mainImage}}" alt="">
</div>
<div class="thumbnails">
<a class="th" role="button" aria-label="Thumbnail" href="">
<img aria-hidden=true src="" />
</a>
</div>
</div>
</div>
<div class="content" id="panel2">
<p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
</div>
<div class="content" id="panel3">
<p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
</div>
<div class="content" id="panel4">
<p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
</div>
<div class="content" id="panel5">
<p>This is the fifth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
</div>
</div>
</div>
</div>
<div class="block block-right right">
<div class="content-details">
<div class="details">
<h3 class="title-product">{{product.brand}}</h3>
<h2 class="short-desc">{{product.shortname}}</h2>
<div class="block-price">
</div>
</div>
</div>
</div>
</div>
</div>
my directive and controller:
(function() {
'use strict';
var app = angular.module('quickPreview');
app.controller('globalCtrl', function ($scope) {
// var e = angular.element($("[ng-init]"));
// console.log(e);
// $scope.product = e.attr('ng-init');
// console.log($scope.product);
$scope.product = [];
var logSomeStuff = function(){
console.log($scope.product);
}
$scope.$evalAsync(logSomeStuff);
});
}(window, window.angular));
(function (){
"use strict";
var app = angular.module('quickPreview');
app.directive('previewProduct', function ($compile,$templateCache) {
return {
restrict: 'A',
replace: false,
transclude: false,
scope: {
attrData: '=dataOverview'
},
link: function(scope, element, attrs) {
element.bind('click', '.sd-click-preview', function (){
var preview = angular.element($templateCache.get('quickpreview.html'));
var cpreview = $compile(preview);
element.append(preview);
cpreview(scope);
console.log(cpreview(scope))
if (scope.attrData) {
console.log(this, '=> this');
}
});
}
};
});
}(window, window.angular));
You don't need quotes in ng-init statement. You are ending the statement prematurely.
<li ng-init="product= {brand:'Nike', price:'30€', mainImage:'images/images.jpg'}">
<div class="content-product">
<div class=" product ">
<p>{{product.brand}}</p>
<img ng-src="{{product.mainImage}} " alt=" ">
<p>{{product.price}}</p>
</div>
</div>
</li>
Here's a working example:http://plnkr.co/edit/XRyYefxncZuqE5GeA3XG?p=preview
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 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.
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/