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
Related
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.
I have a header and a footer that work perfectly when the user is on a desktop and has a mouse and can hover over them and navigate everything that way.
The problem is on mobile when there is no mouse, I need everything to work as close to the same as it does on desktop. I was almost able to make the "PROJECTS" drop-down work to my liking when clicked as well as the "CONNECT" drop-up, but I'm having two issues.
The first problem I'm having is when "PROJECTS" or "CONNECT" drop-ups/drop-downs are clicked, when I click off them or I click them again, the drop-up/drop-down doesn't vanish. It becomes constantly displayed block and I need it to go back to display: none when the user clicks anywhere else or clicks "PROJECTS"/"CONNECT" a second time. I thought the "else" statement in the script I'm using would accomplish that, but apparently it is not working and I'm not sure why! What is the best way to make that work?
The second problem I'm having is when the user clicks on the li item "ONE" inside "PROJECTS" or any of the li items inside "CONNECT", I need the background of the clicked element to turn black and the text to turn white right before it loads the link (similar to how it looks on the desktop version using the :hover css). At this point, when they are clicked it just flashes the gray highlight color over the element for a split second. I tried adding the same type of css but changing "hover" to "focus" or "visited" and I couldn't get either to work. What is the best way to accomplish that?
Here is a JSFiddle of all the code: http://jsfiddle.net/xmdzg8vu/
If you view the JSFiddle on desktop, it will be hard to see the issues I'm having since you have a mouse and can hover... hopefully having the code will help with finding my errors though!
HTML:
<div id="background"></div>
<header id="header">
<div id="nav">
<ul>
<li id="projects" onclick="displayDropdown()">
PROJECTS
<ul>
<a href="/one" class="blocklink" target="_self">
<li id="one">ONE</li>
</a>
</ul>
</li>
</ul>
</div>
</header>
<footer id="footer">
<div id="footer-nav">
<ul>
<li id="connect" onclick="displayDropup()">
CONNECT
<ul>
<a href="https://www.instagram.com/" target="_blank" class="blocklink">
<li id="instagram">
INSTAGRAM
</li>
</a>
<a href="https://twitter.com/" target="_blank" class="blocklink">
<li id="twitter">
TWITTER
</li>
</a>
<a href="mailto:mail#mail.com" class="blocklink">
<li id="email">
EMAIL
</li>
</a>
</ul>
</li>
</ul>
</div>
</footer>
JS and CSS are seen in the JSFiddle.
Thank you so much!
UPDATE: I have updated my JSFiddle to remove extra script not applicable to this question. Hopefully that cleans it up a little!
For the second problem, have you tried the :active selector? For example, using part of your CSS code:
#one:focused, #one:visited, #one:hover, #one:active {
background-color: black;
color: white;
}
It looks like there are some issues in your markup. Normally we don't nest ul>a. We normally do ul>li>a.
For problem #1 you could add an onclick event handler to the submenu li to close the dropdown (/dropup) ul when a submenu item is clicked.
Let me know if that works. You might also want to use touch events for mobile (even thought click might work).
I've created a custom multifield component (titled "breadcrumbs") that will be used as a page's breadcrumbs nav. Each multifield item consists of a textfield and a pathbrowser. I want to list out each multifield item as an anchor tag with the "text" property as the text and the "link" property as the href.
right now, i just have my html listing out the properties as follows:
<div>
<p>${properties.text}</p>
<p>${properties.link}</p>
</div>
which outputs this to the page:
text 1,text 2
link 1,link 2
I know how to use data-sly-list and data-sly-repeat for each of the properties to get a list of all the texts and links like this:
<ul data-sly-list="${properties.text}">
<li><p>${items}</p></li>
</ul>
<ul data-sly-list="${properties.link}">
<li><p>${items}</p></li>
</ul>
but is there a way to list out both properties into one element that would look something like this:
<ul data-sly-repeat.breadcrumbs="${properties}">
<li>
<a href="${breadcrumbs.text}">
${breadcrumbs.link}
</a>
</li>
</ul>
I have also tried data-sly-use with a custom js file, but also can't get multiple properties to loop in one element.
I'd strongly recommend going with a multifield that stores the fields as JSON or nodes like ACS multifield so you get a better data structure for your purpose. I do not recommend the below solution unless you are 100% certain that both link and text are going to be the same length AND in the correct order.
that said, assuming text and link are each multivalued properties, here is what you can do:
<ul data-sly-list.textItem="${properties.text}">
<li>
<a data-sly-attribute.href="${properties.link[textItemList.index]}">
${textItem}
</a>
</li>
</ul>
this will print:
ul>
<li>
<a title-href="link1">
</a>
</li>
<li>
<a title-href="link2">
</a>
</li>
</ul>
since the var name for data-sly-list, the custom identifier textItemList is created. We are interested in the member index on textItemList and use that to display the item at the same index in link by doing: properties.link[textItemList.index]
read more about data-sly-list in the spec
*note: you can also do this with the data-sly-repeat
I am trying to figure out how to detect what page I am on so I can add a selected class to my html with Jquery. I have tried a few bits of script but they have not worked. I am working on a local server and for now just need something that can somehow detect the page I am on and somehow link it to the li's. I'm not sure how to tackle it
HTML:
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li><img src="img/small-icons/access-icon.png" width="17" height="16" alt=""/>Access</li>
<li>Fader Layout</li>
<li>Patching</li>
<li>Wild Controls</li>
<li>Buses & Outputs</li>
<li class="submenu">Contribution
<ul class="sub-section">
<li class="go-back"><a>I AM BACK BUTTON for contribti</a></li>
<li><a>test</a></li>
<li><a>test</a></li>
</ul>
</li>
<li>Oscillator</li>
<li>Talkback</li>
<li>Meters</li>
<li>Automixer</li>
<li>Audio Follow Video</li>
</li>
<li class="submenu selected">test-page
<ul class="sub-section">
<li class="go-back"><a>Back to Main Menu</a></li>
<li><a>IwhatN</a></li>
<li><a>IwhatN</a></li>
</ul>
</li>
<li class="submenu">Control Surface
<ul class="sub-section">
<li class="go-back"><a>Back to Main Menu</a></li>
<li><a>IwhatN</a></li>
<li><a>IwhatN</a></li>
</ul>
</li>
</ul>
</div>
A solution would be to use get params with something like How to get query string params and form the URL's so that they append the param as ?page=mypage and then get the page name or ID with getParameterByName('page') and then check out where you handle your tabs and perform your desired stylings/actions.
This can also be handled from backend, depending on the backend technology you are using.
For example
if PHP, perhaps append the get params there or set specific $_SESSION['page'] variable and handle these clientside
if Django, it can be exported to context or, also appended to get params and handled in the template via javascript or template tags
...and many other possibilities.
If the question though refers to how to set a status based on what page you are on depends on where you want to set that status, for example you might write a script that when clicking a button/link it would first make an ajax POST request to your server sending the ID that you are interested in (setting it in the backend somewhere) and then redirect to wherever you need.
I'm trying to make a Simple Nested List which will be some what similar to this Image.In the Image Main list is on Left and if there's any sublist it will appear on the right on mouse over.
the Link to what I'm trying looks like -sample at jsfiddle you can see Here the Problem I'm facing is
Q1 The Sublist is not easy navigable if you hover from list first to second and to third the whole list will disappear. behavior is not consistent may be because of design.
Q2. In My main page where I have to integrate it,
it keeps Pushing down all the element below it How can i handle it.
Q3. Right now the list is displayed like normal nested list, any help on making/showing side by side as in attached Image
for reference I'm putting the codes here too.
<ul id="ScatList" style="list-style: none inside;cursor: pointer;position: relative;margin: 0px;height:10px;">
<li><span><em>List</em></span>
<ul id="liststart" style="display: none;position:absolute;padding:2px 2px 10px 2px;top:20px;left:190px;text-align:justify" class="search-menu">
<li> <a>First</a>
<ul >
<li><a>1.1</a></li>
<li><a>1.2</a></li>
</ul>
</li>
<li> Second
<ul >
<li><a>2.1</a></li>
<li>2.2</li>
</ul>
</li>
<li> Third
<ul >
<li>3.1</li>
<li>3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
Javscript:
jQuery('#ScatList').hover(function() {
jQuery('#liststart').show(400);
}, function() {
jQuery('#liststart').hide();
});
jQuery('#liststart >li').hover(function() {
jQuery(this).find('ul').show(400);
}, function() {
jQuery(this).find('ul').hide();
});
jQuery('#liststart >li> ul').hide();
You might find my minimalistic navigation plugin useful for this. You're free to use the code and change it to your own liking.