How to deliver the data to the detail page ?
You see the below demo I write, I am studying Framework7, but I am puzzle about to deliver data to the detail page.
Such as I click the first item, I want to deliver the index = 0 to the detail page, if I click the second item, I want to deliver index = 1 to the detail page.
My code is below:
<ul>
<li class="item-content">
<div class="item-media"><img src="http://up.qqjia.com/z/25/tu32695_9.jpg" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Daniel</div>
</div>
<div class="item-subtitle">CEO</div>
</div>
</li>
...
</ul>
You see,I goto the about page is use <a> label, so, How can I deliver the index number, and so I can dynamic set the about page's data.
If there get a demo, maybe that explain more detail.
I opted for an easier way.
Set the data attribute on the 'a' tag:
<a href="#nextpage" data-myfieldname="myfieldvalue">
Then retrieve the data from the Javascript's click event handler:
mydata = $(this).data('myfieldname');
My friend, please use Template7, Framework7 already support what you are asking for, check "Pass Custom Context" section in Template7 documentation page:
http://framework7.io/docs/template7-pages.html#pass-custom-context
It is very simple and the documentation covers all the scenarios, more info and demos here:
http://idangero.us/template7/
EDIT
As some links are dead, referring to new links:
http://framework7.io/docs/template7.html
you can use localstorage concept. When the user click the particular list item like below
save localstorage :
localStorage.setItem("listitem", "1");
get localstorage :
alert(localStorage.listeitem)
Related
I have a link of a hotel which shows us three types of rooms, I need to change that link somehow so it will become direct link to "modern" type room like if I clicked on that rooms, the thing is that that link doesn`t change after I choose "modern" rooms. Can someone please show me and explain how to do that? Here is the link
Post some code so we can see what you're dealing with...
Maybe try using an anchor to wrap the content:
<div id ="#anchor_here"> code here </div>
To link straight to that section:
go to section
if i correctly understand u, you wanna change your static link based on the end users choice, for this purpose you have several choice and the best one is using JavaScript and Jquery same as below:
in html:
<a id="linkId" href="your_linl"> select me </a>
in js:
$('#linkId').attr('href' , 'new link')
is it the answere you looking for ? if not, plz explain more .
So I'm trying to hit this "Review Agreement" button:
which has the following html code:
<section class="col-33 text-right">
<button class="anchor-button bordered" ng-click="onClickReviewAgreement()">Review Agreement</button>
</section>
BUT apparently it's loaded from another resource, so findElement(By.*) doesn't work on it - I've also tried By.xpath("/html/body/ul/li[2]/notification-bar/ul/li/section[1]/section[2]/button")-. All the related code I'm getting in View Page Sources is:
<!-- Agreement form modal -->
<ui-modal
ui-modal-id="ui.modals.agreementFormModal"
ui-modal-class="takeover agreement"
ui-modal-controller="AgreementFormController"
ui-modal-template-url="paths.templates + '/components/forms/tpl.agreement-form.html'"
ui-modal-has-dimmer="true">
</ui-modal>
Is there any way I can select these kinds of elements?
You should be able to bind to ng-click="onClickReviewAgreement()" using css. It should be unique and css is a better and more efficient alternative to xpath
Try using css to find the element and click thereafter -
WebElement buttonElement = driver.findElement(By.cssSelector('[ng-click="onClickReviewAgreement()"]'));
buttonElement.click();
Let me assume that I have the following architecture
_components (folders)
x1.html
x2.html
x3.html
I have a first page where I got the information from the YAM section for every component.
At this point I would like to add a link for every component to another page where I will display the component in a bigger manner.
So, let me assume I have, in the first page :
<div class="col-md-1">
<span id= "logos" class="material-icons"></span>
</div>
and In the componentbig.html I would like to open the right component on the basis of the link.
Do you have any suggestions for me ?
If I understand You correctly, then collections might be the feature You are looking for. For example, I'm usually using collections to generate a list of products and then have a specific page for each product also. Also make sure You check the easy tutorial by Ben Balter.
I'm writing an application, a reporter with heirarchy of folders and files, in the lower heirarchy level there are 2 types of reports: the simple one is a flat (non link) report that being presented as a single simple line.
the second type is a link with a general description in the header and if you press the link you get a full report.
example: if I run a telnet command, I will see the command in the header and if I want to see the entire session with the device I will press the link and it will be presented.
My problem is that most of this lined-files are small but the OS reserve a minimum space for every file so I loss alot of disk space for nothing.
The solution I want to implement is a "dummy" links, which will be presented and will behave like a regular links but actually will be stored in the same file like their "parent" (probably with alot of other links like them).
The solutions I saw so far are only for "jumping" inside a page but this is not what I'm looking for, I want it to be presented like a seperated file and I dont want the "parent" file to present this information at all (the only way to see it will be by pressing the link and even then it will present only this information and not the other file content).
any idea guys?
To link to a specific part in a web page, place an anchor link where you want the user to go to when they click a link with:
<a name="anchor"></a>
and link to it with:
Click here
You can replace "anchor" with a more descriptive name if needed.
To hide/show a div (the following code is untested, but should work)
JQuery solution (If you're using JQuery):
function toggle(divname) {
$(divname).toggle();
}
The corresponding HTML:
<div id="content">some content</div>
<a onclick="toggle('content')">Click here to show/hide the content div!</a>
Non-JQuery Solution:
function toggle(divname) {
var adiv = document.getElementById(divname);
if (adiv.style.display === 'block' || adiv.style.display === '') {
adiv.style.display = 'none';
} else {
adiv.style.display = 'block'
}
}
The HTML:
<div style="display:hidden" id="content">Content</div>
<a onclick="toggle('content')">Click here to show/hide the content div!</a>
I want to have a fade-in/fade-out highlight color for a section of a web page that was jumped to following a link that was formatted like Link, where sectiongoto identifies a name/ID element.
This would work in the same way as clicking on a Stack Overflow inbox link indicating that you have a new message. When you are navigated/jumped-to the post in question, the post's background fades in with an orange hue and then fades out.
How can I implement this effect on a site I'm currently working on? I looked through the source code of SO's pages using Firebug, but didn't see anything that linked up.
You're probably looking for the :target psuedo class
I have not yet looked at SO scripts, but Im fairly certain that the fade is a JavaScript thing. It can be done with CSS transitions, but that's usually for things like fade in and out of color for hover/focus.
http://www.w3.org/TR/selectors/#target-pseudo
http://caniuse.com/#search=target
Assuming you have sample markup like this
<ul>
<li>Go To 1</li>
<li>Go To 2</li>
</ul>
<div id="target1"><!--Your HTML Here --></div>
<div id="target2"><!--Your HTML Here --></div>
You then want CSS like this
div:target { background-color:orange; }
so that when your user clicks a link in the list, your url takes the hashcode #target1 or #target2, and the applicable target in the page now has a background color of orange.
So.. what you need to look at is the concept of using a fragment identifier within the URL.
Extract from the wikipedia entry
*emphasis is mine
...a fragment identifier is a short string of characters that refers
to a resource that is subordinate to another, primary resource. The
primary resource is identified by a Uniform Resource Identifier (URI),
and the fragment identifier points to the subordinate resource.
I prefer to call it URL hash tags simply because the method used to retrieve them in JavaScript is
window.location.hash. Call it what you want - here is the explanation :
Lets take the URL of my answer as an example:
Aha! But how did I have the URL before posting this? ;)
https://stackoverflow.com/questions/10017592/highlighting-a-section-of-a-web-page-the-way-so-does-with-inbox-links/10036643#10036643
So the hash value is the #10036643 at the end of the URL. You can get to that value by inspecting the window.location.hash variable. The same syntax can be used to add elements to the hash list -
window.location.hash += "#more_info"
Multiple key and value pairs can be created easily to store more info :
http://foobar.com/#one=1#two=2#three=3
window.location.hash will now give us : #one=1#two=2#three=3
And from there we can simply use the .split() function with the # character as the delimiter. That should give you something like this :
["", "one=1", "two=2", "three=3"]
Pop the first empty element off the array and then for each key/value pair you could do an additional .split('=') or simply don't use keys for the values, just have the hash values like this :
http://foobar.com/post/how-to/#COMMENT_ID
Ok,
Now that we know how to embed info into the URL we can start to parse it. For the sake of this example we'll assume a simple HTML structure like this -
...
<body>
<div>
Page Header
</div>
<div class="blog_post">
An interesting section of content.
<div class="comment cid0" ></div>
</div>
<div class="blog_post">
More fantastic information (and a special offer).
<div class="comment cid0" ></div>
<div class="comment cid1" ></div>
</div>
<div>
Page Footer
</div>
</body>
...
Given this URL : http://foobar.com/post/how-to/#cid1
You could use some JavaScript in the document.ready function to control where to draw the focus -
$(function(){
// Extract comment id from URL
var targetElementId = window.location.hash.split("#")[1]; // This gives us 456
var targetElement = $(".comment ."+targetElementId);
var targetElementOffset = targetElement.offset();
$('body').scrollTop(targetElementOffset.top);
// Insert highlight functionality here
});
With regard to the highlighting, I think that Kerian's answer pretty much covers it - you'll need to use some browser dependent features such as CSS Transitions.
You might be able also to get away with some alternatives - you can use these suggestions to spark your imagination -
placing a repeated 1x1px of slightly transparent color behind all the content in that element and simply use the .fadeOut() function to hide it after a certain delay.
animating a background image with background-position
perhaps cycling through some predefined background-color properties with setInterval callbacks