How to display the image after clicking from list? - javascript

I am thinking of trying to supply an API url to my html.
My idea is to redirect the page to my html page where the image displayed is the one clicked from the list from other html.
I am having a hard time since I am not sure where to look and I dont see any examples same as what I wanted.
What I want to do:
The image list would be displayed from an index html page then when item is clicked, be redirected to my html page.
All I have tried is to upload the images from my computer but that is not what I wanted.
The part where the image should be displayed is just plain text for now.
<div id="page_getting_started" class="display_area_content display_none narrow_page_content">
<p>A more detailed user guide (with screenshots and descriptions) is available here.</p>
<ol>
<li><strong>Load Images</strong>: The first step is to load all the images that you wish to annotate. There are multiple ways to add images to a VIA project. Choose the method that suits your use case.
<ul>
<li>Method 1: Selecting local files using browser's file selector
<ol>
<li>Click <span class="text_button" title="Load or Add Images" onclick="sel_local_images()"><code>Project → Add local files</code></span></li>
<li>Select desired images and click <code>Open</code></li>
</ol>
</li>
<li>Method 2: Adding files from URL or absolute path
<ol>
<li>Click <span class="text_button" title="Add images from a web URL (e.g. http://www.robots.ox.ac.uk/~vgg/software/via/images/swan.jpg)" onclick="project_file_add_url_with_input()"><code>Project → Add files from URL</code></span></li>
<li>Enter URL and click <code>OK</code></li>
</ol>
</li>
<li>Method 3: Adding files from list of url or absolute path stored in text file
<ol>
<li>Create a text file containing URL and absolute path (one per line)</li>
<li>Click <span class="text_button" title="Add images from a list of web url or absolute path stored in a text file (one url or path per line)" onclick="sel_local_data_file('files_url')"><code>Project → Add url or path from text file</code></span></li>
<li>Select the text file and click <code>Open</code></li>
</ol>
</li>
</ul>
</li>
<li><strong>Draw Regions</strong>: Select a region shape (<span class="text_button" onclick="select_region_shape('rect')">rectangle</span>, <span class="text_button" onclick="select_region_shape('circle')">circle</span>, <span class="text_button" onclick="select_region_shape('ellipse')">ellipse</span>, <span class="text_button" onclick="select_region_shape('polygon')">polygon</span>, <span class="text_button" onclick="select_region_shape('point')">point</span>, <span class="text_button" onclick="select_region_shape('polyline')">polyline</span>) from the left sidebar and draw regions as follows:
<ul>
<li>Rectangle, Circle and Ellipse
<ul>
<li>Press left mouse button, drag mouse cursor and release mouse button.</li>
<li>To define a point inside an existing region, click inside the region to select it (if not already selected), now press left mouse button, drag and release to draw region inside existing region.</li>
<li>To select, click inside the region. If the click point contains multiple regions, then clicking multiple times at that location shuffles selection through those regions.</li>
</ul>
</li>
</ul>
<ul>
<li>Point
<ul>
<li>Click to define points.</li>
<li>To draw a region inside existing region, click inside the region to select it (if not already selected), now click again to define the point.</li>
<li>To select, click on (or near) the existing point.</li>
</ul>
</li>
</ul>
<ul>
<li>Polygon and Polyline
<ul>
<li>Click to define vertices.</li>
<li>Press <strong>[Enter]</strong> to finish drawing the region or press [Esc] to cancel.</li>
<li>If the first vertex needs to be defined inside an existing region, click inside the region to select it (if not already selected), now click again to define the vertex.</li>
<li>To select, click inside the region. If the click point contains multiple regions, then clicking multiple times at that location shuffles selection through those regions.</li>
</ul>
</li>
</ul>
</li>
<li><strong>Create Annotations</strong>: For a more detailed description of this step, see Creating Annotations : VIA User Guide. Click the <span class="text_button" onclick="annotation_editor_toggle_all_regions_editor()"><code>View → Toggle attributes editor</code></span> to show attributes editor panel in left sidebar and add the desired file or region attributes (e.g. name). Now click <span class="text_button" onclick="annotation_editor_toggle_all_regions_editor()"><code>View → Toggle annotations editor</code></span> to show the annotation editor panel in the bottom side. Update the annotations for each region.</li>
<li><strong>Export Annotations</strong>: To export the annotations in json or csv format, click <span class="text_button" onclick="download_all_region_data('csv')"><code>Annotation → Export annotations</code></span> in top menubar.</li>
<li><strong>Save Project</strong>: To save the project, click <span class="text_button" onclick="project_save_with_confirm()"><code>Project → Save</code></span> in top menubar.</li>
</ol>
</div>
I expect to see the image in my html page when clicked from the list from another html.

Related

Adding Button Actions - GetUIKit

I'm using the following GetUIKit: https://getuikit.com/
I want to use the UIKit and JS to do the following:
When a button named "Next" is pressed, the active item on an unordered list is changed to the subsequent item and that content appears. I would also like for a second button to appear, "Previous", if the active item is anything other than the first item in the UL.
Here is what I have so far:
<ul class="uk-subnav uk-subnav-pill" uk-switcher>
<li>Welcome</li>
<li>Get Involved</li>
<li>Sign-Up</li>
</ul>
<ul class="uk-switcher uk-margin">
<li>Welcome!</li>
<li>Here is how you can get involved!</li>
<li>Fill out the following form to be added to our contact list!</li>
</ul>
<button class="uk-button uk-button-default">Previous</button>
<button class="uk-button uk-button-default">Next</button>
UIKit provides navigation from the subnavs. In other words, I can click on those and it will pull up the corresponding item from the subsequent UL.
My issue is how I do this using a Next and Previous button. Are buttons the best choice? If so, using JS, what is the best way to go about manipulating the HTML/CSS to change what appears based on user's selection of "Next" or "Previous"?
I suggest you to use "Tab" in Uikit, Just use that tabbing name as Next/Prev
<ul uk-tab>
<li class="uk-active"></li>
<li></li>
<li class="uk-disabled"><a></a></li>
</ul>

Saving dynamically added element by jquery(or javascript) to View(or project) permanently asp.net-mvc

Imagine i have View and it contains :
<ol >
<li> ....</li>
</ol>
I want to know if its possible when i dynamically added another element and append to this list and saving it in View(in an other saying to Project) permanently?Then it becomes like this when i open
<ol >
<li> ....</li>
<li>New Added dynamically element by jquery </li>
</ol>
Add element -> edit and save View ->When i open project again it comes with last changes that i made

Make a part of url as ellipse

I have to show a part of url link as ellipse and when I click the ellipse it should show the entire url. Using selected I'm only showing the final li and I'm not showing the 1st two li's. Not sure how to get the selectedClass url from below code.
That means the url "/home/digital/photos" should show like "/home/.../photos. And I'm only trying to do it in mobile.
<div class="url">
<ol>
<li>
Home
</li>
<li>
Components
</li>
<li>
photos
</li>
</ol>
</div>
You could do. Ive seen this done, a few times. But essentially if you want this for all your A hrefs you may need to set some sort of global click. But this should get you going.
Home

On clicking Highlight background of div in master page

The master page have some link.The static part has a list of anchor.onclick the content part is change.
How to make a highlight to the click anchor tag?
e.g
master page content
HOME PROFILE MASSEGES
content part here
I want to change the background when I clicking perticular anchor tag. on the static view.
Suppose this is the code in masetr page. static code for all pages.
<div id="menu">
<ul>
<li class="menu-item">Home</li>
<li class="menu-item"><a href="#" >Profile</a></li>
<li class="menu-item"><a href="#" >Messeges</a></li> </ul>
</div>
I want to clicking on particular event, the background of that anchor has to change.
You could use jQuery for this.
$("#yourTagId").click(function(){
$("#yourTagId").css('background-color','yellow');
});
In your case you should give al li tags an unique ID

How to show active tab-pane inside tab-container on click event?

I am having menu links on one page & tab-container on another page. I want when someone click on one of the menu link it should go the page in which tab-container is there and show active tabpane of which menu has been clicked
Eg. Menu name: ab, ba, cd
Tab name: ab, ba, cd
So I want when user click on menu 'ba' it should go to the page and showing the 'ba' as active tab and so on
Help me out using javascript
It would be really helpful if you post sample of your code. If you want to identify which tab is clicked on another page, you probably need to pass menu name in query string as below.
<body>
<ul class="no-list">
<li >
<a href="page2.aspx?menu=ab" >ab</a>
</li>
<li >
<a href="page2.aspx?menu=cd" >cd</a>
</li>
</ul>
and call below javascript function on load of another page. You will get the value of clicked menu. now you need to write your logic to show active tabpane.
function onloadcheck(){
var queryString = location.search.substring(1);
alert(queryString.split('=')[1]);
};

Categories