Original question: (please skip to the EDIT)
I am trying to make images of books which I am receiving clickable.
<div ng-app="myApp" ng-controller="myAppCrtl">
<ul ng-repeat="x in browseBooks">
<div id="{{x.bookId}}">
<li>
<p>{{x.name}}</p>
<p>{{x.price}}</p>
<br>
</li>
</div>
</ul>
</div>
Following the solutions provided here doesn't work, and the link to the angularjs site is broken.
I know the function logout works perfectly, as with button it is executing.
The problem with <a> tag I am unable to make the image trigger a desired function.
EDIT
I understand what my problem is, ng-repeat creates a child scope for each item in the loop. So trying to access the logout() method defined in parent scope is not working. ?
Any idea? even replacing "logout()" with $parent.logout() isn't working...
EDIT2
It is working, however all changes are local to inner scope...
You need quotes around logout()
and then you could use javascript:void(0) if needed and # doesn't work for you
<img style="max-width:100px;" ng-src="{{x.img}}">
Have you tried:
<li ng-click="logout()">
<img style="max-width:100px;" ng-src="{{x.img}}">
<p>{{x.name}}</p>
<p>{{x.price}}</p>
<br>
</li>
Related
thanks in advance for your help.
I have some code that has an <a href>xxxxx</a> inside of a larger block of code which consists of divs inside of an <a>xxxxx</a> block, like this:
<a href=...>
<div>
xxxxxxx
</div>
<div>
<a href=...>xxxxxx</a>
</div>
<div>
xxxxx
</div>
</a>
note: in this case both <a> actually use the same href URL, the reason there are two <a> is that the first <a> already existed prior to surrounding the larger page area with <a href="..."> functionality
the problem is that i now need to use a <form> with hidden values and i am unclear as to where and how to place the <form> so that the user clicks definitely pass the hidden form parameters to the url
thanks again.....
First, using a link inside a link (a tags) makes no sense and is a no-go. Erase the inner link - wherever you click inside the outer link, the link will work anyway - no need for an inner link if it has the same target.
Second, if you mean to transmit parameters ("hidden form values") when you click that link, I wouldn't use a form, but append these values to the linked URL (like http://example.com/page1.php?par1=abc&par2=xyz, so that they can be received as GET parameters by the target page.
I'm building a website for a school project. In a page i need a link to another page (profile.jsp) with params, because I need to do a query in that page. I've tried forward in JSP but it opens the page right away, I need to activate this with a link, or also with a button. Here I'm using windows.location but it doesn't allow me to give params as far as i now.
<div class="mask_container">
<h2><%out.println(title);%></h2>
<p onClick="JavaScript:window.location='profile.jsp';"><%out.println(autor);%></p>
<img src="img/like-white.png" class="social">
<img src="img/comment-white.png" class="social">
<img src="img/download-white.png" class="social">
</div>
how about passing your parameter values in query string as shown below, instead of <p> tag put below <a> tag to redirect to another page
<%out.println(autor);%>
You can get value of parameter on other page using request.getParameter("param") this will gives you parameter value.
May this will help you.
Is there a way to link to a form using only HTML/CSS? I am still a beginner in web dev and have not yet started on JavaScript or JQuery.
So what I want to do is,
<div>
<ul>
<a href="??" target="_parent">
<li class="toggle1">Guest</li>
</a>
<a href="??">
<li class="toggle2">Owner</li>
</a>
</ul>
</div>
...in the tags in the I want to link to a form which has elements like First name, Last name etc, such that when I click on "Guest" the form for the guest should appear and likewise for "Owner"
There is! Make the href tags to #guestform and #ownerform. Then, make each form's id attribute those values (guestform and ownerform). This looks like so:
<div>
<ul>
<a href="#guestform">
<li class="toggle1">Guest</li>
</a>
<a href="#ownerform">
<li class="toggle2">Owner</li>
</a>
</ul>
</div>
<form id="guestform">...</form>
<form id="ownerform">...</form>
Then, in the css, do the following:
form {
display:none;
}
form:target {
display:block;
}
Hope this helped you!
EDIT: As sdcr said, the a tag should be inside the li, and not the other way around for it to be semantically correct. It should be like this instead
<div>
<ul>
<li class="toggle1">
Guest
</li>
<li class="toggle2">
Owner
</li>
</ul>
</div>
I may have misinterpreted your answer based on the lack of information given.
If you don't care who the end user is, and make both forums accessable to them no matter if they're a guest or owner, you'd simply create another HTML document and link to that document (provided that your web server can serves "static" content).
For instance, say you created another file called owner_form.html and somewhere within the body, you had:
<form>
...
</form>
From your index.html you could link to owner_form.html via a <a> tag like this:
... Contents that will redirect you
(old answer)
No, this is not possible in only HTML and CSS. Not even (securely & validly) with JavaScript.
HTML and CSS don't have the ability to differentiate the client using the page on their own. And JavaScript can't securely do this either.
You should look into server-side programming. This is where the magic would happen for you. You can try many different frameworks / scripting languages that have web-server functionality to them, for instance, some of the popular ones are:
Ruby on Rails
PHP
NodeJS
Django
So I have 4 different room transitions (up, down, left & right). I want to be able to set each transition to go to a specific page, and repeat if the same transition is clicked again.
For example, have "left" (data-animation 55) goto "Page1.html", and if I was already on "Page1.html", then it would just transition right back into the page. And I would have the "right" button, go to "Page2.html", etc.
https://github.com/cweigen/page_transition_room
There's the github repo, but this is the code that I've been messing with, experimenting with different versions of it to attempt going to a specific page and repeating if the same button is clicked, but go to another specific page is another menu button is clicked.
<div class="pt-triggers">
<div id="dl-menu" >
<ul class="dl-menu">
<li data-animation="54"><a href="#" > right </a></li>
<div class="pt-triggers1">
<li data-animation="55"><a href="#" > left</a></li>
<div class="pt-triggers2">
<li data-animation="56"><a href="#" > down</a></li>
<div class="pt-triggers3">
<li data-animation="57"><a href="#" > up</a></li></div>
</ul>
</div>
</div>
<div id="pt-main" class="pt-perspective">
<div class="pt-page pt-page-1"><iframe src="http://visiondigit.al/VisionDigital_Launch/" width="100%" height="100%"> </iframe></div>
<div class="pt-page pt-page-2"><iframe src="http://scsuchat.com" width="100%" height="100%"> </iframe></div>
</div>
You can't expect others to download the repo and build it for you. Time matters! That's the first thing you need to learn how to ask a question properly on StackOverflow.
As you are a new user, I'm going to make one-off excuse for you.
The library you are using is not the best choice for your task. However, it does provide as many as 67 different transition effects, which are defined in **pagetransions.js** and called using data-animation attribute. Have a look at the js file and you can choose the specific animation you are looking for.
To solve your other problem, you'll have to write a bit of your own code as the author doesn't provide a function to link each button with specific page, nor hiding the button when you are already on that page. You can use jQuery to do so.
But like I said, this is not the best nor the only option you have.
Check
THIS DEMO
I have created a structure that mostly mimics your requirements. Have a play and try to understand the demo. The structure is quite simple. It uses two external resources which you can see and download from the fiddle.
In creating this webtop app, I've created stacks of contenteditable divs exactly like this one, which is part of a homemade widget. But for some reason this one isn't working.
<div class="draft combobox" title="Draft">
<ul>
<li>
</li>
</ul>
<div class="text" contentEditable="true"> <!-- Right Here -->
<img class="arrow button" src="icons/scroll-down-white.png" />
Now just a little background around the issue. I am in the process of rewriting the html, well turning it into haml anyway (with Phamlp). It was just getting too illegible. I'm also using lessphp on the css.
These are the only changes I've made. The output remains the same, only now the contenteditable div doesn't work... It accepts focus, but there's no cursor... and no response to key events.
Also I'm yet to attach any javascript to it. So there's nothing going on there that could be hindering it.
So what's wrong with this div!
OK I worked it out... turned out that I had '-webkit-user-select:none' set in the css on an ancestor div!