If I have this html:
<div id="myDiv"></div>
and this CSS:
#myDiv{
background:url('../images/someImage.png') no-repeat;
background-size:100%;
width:44px;
height:44px;
}
I need to open a new page when the user taps on myDiv. I have an external js file where I have this:
function bindMyDiv(){
$("#myDiv").bind('tap',function(event, ui){
alert("binding");
})
}
But I don't understand where to call this from the HTML, or if this is even the right way to go about this. Advice?
Try
$("#myDiv").live("tap", function(event){
alert('binding');
});
You can place this in side your onReady javascript file
EDIT:
http://jsfiddle.net/R9e6u/
Everyone here provided pretty good insight on different solutions for you to handle your script, but I don't think that anyone stopped to think SHOULD they help improve your script. "or if this is even the right way to go about this ", the answer is no. And perhaps I'm over-simplifying, but with JQM if you're trying to have a div (or any DOM element for that matter) open a new page simply wrap an anchor tag around around it (or in it, whichever is appropriate) and set your href to href="#myNewPage"and the id on the JQM page that you want to load to id="myNewPage"
jQuery Mobile's frame work is set up to automatically inject JS & AJAX into normal HTML elements to provide a smooth UX. While binding a touch event is sometime needed, this situation doesn't warrant that level of code...thats the beauty of jQuery Mobile =).
Examples of when to bind a touch event: show/hide a dom object, trigger a click for a plug-in etc.
You want to call that function on the pageinit event for the page on which it resides. You could use some other page-events from jQuery Mobile like: pagecreate, pageshow, etc. but I think pageinit is your best-bet.
The implementation would look something like this:
$(document).delegate('#page-id', 'pageinit', function () {
$("#myDiv").bind('tap',function(event, ui){
alert("binding");
})
});
OR
$(document).delegate('#page-id', 'pageinit', bindMyDiv);
You would replace #page-id with the ID of the data-role="page" element in which your div resides.
This method is preferred over event delegation for the #myDiv element because binding directly to an element creates less overhead when the event is triggered. If you use event delegation then the event has to bubble-up to the delegation root.
Related
I'm starting to learn angularJS better, and I've noticed that AngularJS tries to make strong emphasis on separating the view from the controller and encapsulation. One example of this is people telling me DOM manipulation should go in directives. I kinda got the hang of it now, and how using link functions that inject the current element allow for great behavior functionality, but this doesn't explain a problem I always encounter.
Example:
I have a sidebar I want to open by clicking a button. There is no way to do this in button's directive link function without using a hard-coded javascript/jquery selector to grab the sidebar, something I've seen very frowned upon in angularJS (hard-coding dom selectors) since it breaks separation of concerns. I guess one way of getting around this is making each element I wish to manipulate an attribute directive and on it's link function, saving a reference it's element property into a dom-factory so that whenever a directive needs to access an element other than itself, it can call the dom-factory which returns the element, even if it knows nothing where it came from. But is this the "Angular way"?
I say this because in my current project I'm using hard-coded selectors which are already a pain to mantain because I'm constantly changing my css. There must be a better way to access multiple DOM elements. Any ideas?
There are a number of ways to approach this.
One approach, is to create a create a sidebar directive that responds to "well-defined" broadcasted messages to open/close the sidebar.
.directive("sidebar", function(){
return {
templateUrl: "sidebar.template.html",
link: function(scope, element){
scope.$root.$on("openSidebar", function(){
// whatever you do to actually show the sidebar DOM content
// e.x. element.show();
});
}
}
});
Then, a button could invoke a function in some controller to open a sidebar:
$scope.openSidebar = function(){
$scope.$root.$emit("openSidebar");
}
Another approach is to use a $sidebar service - this is somewhat similar to how $modal works in angularui-bootstrap, but could be more simplified.
Well, if you have a directive on a button and the element you need is outside the directive, you could pass the class of the element you need to toggle as an attribute
<button my-directive data-toggle-class="sidebar">open</button>
Then in your directive
App.directive('myDirective', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
angular.element('.' + attrs.toggleClass).toggleClass('active');
}
};
}
You won't always have the link element argument match up with what you need to manipulate unfortunately. There are many "angular ways" to solve this though.
You could even do something like:
<div ng-init="isOpen = false" class="sidebar" ng-class="{'active': isOpen}" ng-click="isOpen = !isOpen">
...
</div>
The best way for directive to communicate with each other is through events. It also keeps with the separation of concerns. Your button could $broadcast on the $rootScope so that all scopes hear it. You would emit and event such as sidebar.open. Then the sidebar directive would listen for that event and act upon it.
As the title says,I haven't realy started creating the code because I need a little help in here.Im not good at javascript or jquery scripting,I just started learning about html so I only know the basics.Now,getting back on topic.
I want an iframe disapear as soon as it's clicked but as I said I just started scripting.Anyone has any idea ?
Here's how you can do this with plain old JavaScript. Note that clicking the page loaded inside the iframe may not call you event handler which is why I've added a border to this example (clicking the border will execute the event handler). You may need to overlay the iframe with another element and capture the click event on the overlaid element.
<iframe src="http://someurl" onclick="this.style.display = 'none'" style='border: solid 10px red'></iframe>
you can use CSS to do this, give your iframe an id for example call it "iframe_id" like this:- #iframe_id.click{ display:none;}
Edit: as per your comment.
To include jQuery, put the following in your HTML <head></head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Then use this w3schools article to learn how to attach javascript to HTML.
In your Javascript, you can use jQuery like this:
// Run all of the following code when our document is loaded
$( document ).ready(function() {
// Setup an event handler. Says, when we click on an iframe, run this function
$("iframe").on("click",function(){
$(this).remove();//jQuery function to completely remove from DOM
/* OR */
$(this).css("display","none"); //jQuery function that completely hides in CSS
};
});
Since you said you're new to programming HTML, you will want to read and practice JS. Here's an introduction to JS and jQuery.
You know those webcams you can control over the internet? When you push the button to go left, it moves to the left.. but nothing else happens on the page.. Thats what I need to create.
I have a page that allows me to control lights in my house. When I click the button, I now have it load the php script (that controls the light) in a separate frame.. but I want to get rid of this. So basically I want to create a link that will call the php in the background, but that link won't do anything to the page its on.
Any ideas?
Use a return false; in the click event:
Not Follow the Link
Explanation
The return value of an event handler determines whether or not the default browser behaviour should take place as well. In the case of clicking on links, this would be following the link, but the difference is most noticeable in form submit handlers, where you can cancel a form submission if the user has made a mistake entering the information.
The modern way of achieving this effect is to call event.preventDefault(), and this is specified in the DOM 2 Events specification.
You will need to use ajax to achieve such a behavior.
Links that don't do anything are basically HTML links where you bind the onclick event to a JavaScript function which returns false. This makes the links "do nothing" but still executes the JavaScript which tells the camera to go left/right.
HTML 5 let's you officially use anchor elements without a href attribute. But I would just bind a Javascript event listener to whatever element your already have. I'd even add these kind of interactive elements themselves to the DOM with Javascript, since they don't serve any purpose if a user has JS disabled.
...
will give you text that looks like a link.
If it's not really a link you may wish to consider a different kind of styling to emphasize the point and so that other underlined links show as links and this shows as something else. All depends on your needs and the situation.
I like jquery...
You will notice that the onclick function returns false. This is to stop the link from working...
<a onclick="do_it(this)" ...
then in your js
function do_it(anchor)
{
jQuery.ajax(
{
url : anchor.get_attribute('href'),
data : {whatever},
type : 'POST',
success : function(data)
{
alert('woo');
}
}
)
return false;
}
Pretty much what I'm doing here is:
So when the anchor is clicked jquery POSTs to the anchor's url. You can include data if you need to. This happens asynchronously so nothing happens on your page until jQuery gets response html(or whatever). If you want to do anything with the response you can get hold of it in the success function.
When the function returns it returns false, thus preventing the anchor from doing it's usual thing.
you talking about the javascript, create a onlick event / function and implement AJAX in specific DIV area
please check this out:
http://www.w3schools.com/ajax/ajax_examples.asp
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
//You need `ajax_info.txt` file with some content
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
You can use the following jquery solution:
HTML:
Move lights to left
JQUERY:
<script type="text/javascript">
$(document).ready(function() {
$('#link1').click(function(e) {
e.preventDefault();
$.ajax( $(this).attr('href') );
});
});
</script>
Can't believe no one has posted this yet. just use javascript void:
some click function
Its one of the oldest tricks in the book!
You need Ajax to retrieve datas from PHP without loading another page.
To "disable" the link:
Link
Or:
Link
Or just write a normal link and use jQuery (or another library) to add the event:
$('a').click(function(event) {
// the code with ajax
event.preventDefault();
});
I have an iframe and in order to access parent element I implemented following code:
window.parent.document.getElementById('parentPrice').innerHTML
How to get the same result using jquery?
UPDATE: Or how to access iFrame parent page using jquery?
To find in the parent of the iFrame use:
$('#parentPrice', window.parent.document).html();
The second parameter for the $() wrapper is the context in which to search. This defaults to document.
how to access iFrame parent page using jquery
window.parent.document.
jQuery is a library on top of JavaScript, not a complete replacement for it. You don't have to replace every last JavaScript expression with something involving $.
If you need to find the jQuery instance in the parent document (e.g., to call an utility function provided by a plug-in) use one of these syntaxes:
window.parent.$
window.parent.jQuery
Example:
window.parent.$.modal.close();
jQuery gets attached to the window object and that's what window.parent is.
You can access elements of parent window from within an iframe by using window.parent like this:
// using jquery
window.parent.$("#element_id");
Which is the same as:
// pure javascript
window.parent.document.getElementById("element_id");
And if you have more than one nested iframes and you want to access the topmost iframe, then you can use window.top like this:
// using jquery
window.top.$("#element_id");
Which is the same as:
// pure javascript
window.top.document.getElementById("element_id");
in parent window put :
<script>
function ifDoneChildFrame(val)
{
$('#parentPrice').html(val);
}
</script>
and in iframe src file put :
<script>window.parent.ifDoneChildFrame('Your value here');</script>
yeah it works for me as well.
Note : we need to use window.parent.document
$("button", window.parent.document).click(function()
{
alert("Functionality defined by def");
});
It's working for me with little twist.
In my case I have to populate value from POPUP JS to PARENT WINDOW form.
So I have used $('#ee_id',window.opener.document).val(eeID);
Excellent!!!
Might be a little late to the game here, but I just discovered this fantastic jQuery plugin https://github.com/mkdynamic/jquery-popupwindow. It basically uses an onUnload callback event, so it basically listens out for the closing of the child window, and will perform any necessary stuff at that point. SO there's really no need to write any JS in the child window to pass back to the parent.
There are multiple ways to do these.
I) Get main parent directly.
for exa. i want to replace my child page to iframe then
var link = '<%=Page.ResolveUrl("~/Home/SubscribeReport")%>';
top.location.replace(link);
here top.location gets parent directly.
II) get parent one by one,
var element = $('.iframe:visible', window.parent.document);
here if you have more then one iframe, then specify active or visible one.
you also can do like these for getting further parents,
var masterParent = element.parent().parent().parent()
III) get parent by Identifier.
var myWindow = window.top.$("#Identifier")
How to make tabs on the web page so that when click is performed on the tab, the tab gets css changed, but on the click page is also reloaded and the css is back to original.
dont use the jquery :D
all of what you needs a container, a contained data in a varable and the tabs
the container is the victim of the css changes.
the tabs will trigger the changing process.
if you have a static content, you can write this into a string, and simply load it from thiss.
if you have a dinamically generated content, you need to create ajax request to get the fresh content, and then store it in the same string waiting for load.
with the tabs you sould create a general functionusable for content loading.
function load(data) {
document.getElementById("victim").innerHTML = data;
}
function changeCss(element) {
//redoing all changes
document.getElementById("tab1").style.background="#fff";
document.getElementById("tab2").style.background="#fff";
element.style.background = "#f0f";
}
with static content the triggers:
document.getElementById("tab1").onclick = function() {load("static data 1");changeCss(document.getElementById("tab1"))};
document.getElementById("tab2").onclick = function() {load("static data 2");changeCss(document.getElementById("tab2"))};
if you want to change the css, you need another function which do the changes.
i tell you dont use the jquery because you will not know what are you doing.
but thiss whole code can be replaced by jquery like this:
$("tab1").click(function(e) {
$("#tab1 | #tab2").each(function() {
$(this).css("background","#fff"); });
$(this).css("background","#00f");
$("#victim").append("static content 1");
});
$("tab12click(function(e) {
$("#tab1 | #tab2").each(function() {
$(this).css("background","#fff"); });
$(this).css("background","#00f");
$("#victim").append("static content 2");
});
if you know how javascript works then there is noting wrong with the jquery, but i see there is more and more people who just want to do their website very fast and simple, but not knowing what are they doing and running into the same problem again and again.
Jquery UI Tabs:
http://jqueryui.com/demos/tabs/
Have a <A href tag around the "tab" and use onClick to fire some Javascript that changes the CSS.
If you do not want use Jquery for creating of UI tabs, please see my cross-browser JavaScript code: GitHub.
You can use different ways to create tabs and tab content.
Tab content can added only when tab gets focus.
You can remember selected tab. Selected tab opens immediatelly after opening of the page.
You can create tabs inside tab.
Custom background of the tab is available.
Example: Tabs