I'm new in web design and in web development, and I found myself in trouble while I was designing a website. Actually I'm working on Wordpress, but I have to customize a page "by hand", because it's the only way for accomplishing this task. My aim is to create a list in which each list item will make appear an element somewhere in the page. Specifically I should have a collapsible list where each "subitem" click lets a new list appear on the right, where this new list is different from the others.
Now, my question is, how can I do this? How can I "link" a subitem with a hidden list that will result visible clicking on the specific subitem? Does anybody indicate me the right way to pursue at least ( such as using CSS, Javascript, HTML, ... ) ?
P.S. Sorry for my bad English.
I hope someone could help me
In javascript, look into using things like this:
var new_div = document.createElement("div");
var node = document.createTextNode("This div is new.");
new_div.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(new_div);
to make an element appear, the createElement is used (creates html tag) you can then style the element using setAttribute() or removeAttribute(),
and to link the new content to the list items, the getElementById is used (each item in the list needs its own id to identify it, if each item does different things).
Related
I am low level programmer and new to HTML.
I have the html body which has the structure of my page.
one of the elements in this body is a long dropdown list. I was thinking that it makes sense to have this list defined separately, at the bottom of the file or at the top, and only reference it inside the body, so the full structure size stay reasonable and easy to read.
Is this something I can actually do? is this a reasonable request?
I would consider populating this dropdown list with Javascript code if it really is that long.
For example, you can make an array of the values/names of the select options you need to create and then iteratively add options elements to a select element. If you give us an idea of the select you're using, we can help you come up with a way. What have you tried thus far?
How can I go about creating a form which pops up when the user clicks a button on a Jade template? I tried the following in HTML, which works:
http://www.formget.com/how-to-create-pop-up-contact-form-using-javascript/
Now to use this in my Node.js project would I need to create a separate Jade file for the form itself? That is what I tried and then I tried to display the form like this:
function div_show() {
alert("Test");
document.getElementById('abc').style.display = "block";
}
Unfortunately that does not work. What is the recommended approach for creating a pop up form in Jade? I am really confused with Jade and I can't seem to find a good tutorial for this, there are loads for HTML...
Thanks for the help!
Normally for this you would use:document.getElementById('abc').style.visibility="visible";
To hide your table use:document.getElementById('abc').style.visibility="hidden";
When using the 'style' attribute you are using plain css commands. Make sure your default div style settings have it 'hidden', if that is what you want.This display:block;visibility:hidden;' must exist in your default settings for that div style so the DOM has a clear path to what it is controlling. By itself 'display:block;' does not hide or make objects visible, it is mostly about the shape the div creates as a container for objects.
As an option you can use:
document.getElementById('abc').style.display="block";
To hide your table use:document.getElementById('abc').style.display="none";
For this you would set your div style settings to 'display:none;visibility:visible;.
In this case 'display="none"' removes the object from all display layers and could allow other objects to fill in it's space. When it is visible it will push other objects on the same z-index out of the way. If it has a higher z-index, say +100 higher, it will pop-up above the other objects on the page. The 'visibility' attribute only controls the objects visibility, it does not remove it from the display memory. It can still take up space even though it is not visible. The 'opacity' attribute does about the same thing, except it allows you to also make an object as transparent as you like.
commerce site that has a particular tab navigation code that allows users to click and view information.
The Tab Nav looks like this:
Details | Shipping | Returns | Lifestyle View
When you click on anyone of these a paragraph appears below the tab with more information. What happens though is that all the other list items get pushed below the paragraph rather than staying in their current positions. So for instance if I click on "Details," the "Shipping," and "Returns," tab gets pushed down. I would like all the menu items to stay intact and just have the paragraph appear below each menu.
Any help would be greatly appreciated.
the page can be found at:
http://babsandmickieco.myshopify.com/collections/clothing-all/products/sana-dress#
As I've demonstrated in this JSFiddle, it really is a case of just appending an in flow element onto the list item. In the example I have provided, I used the following jQuery code to append a paragraph element (P) to a List item element (li).
Snippet
$("#clickAble").click(function(e) {
$("#clickList").append($("<p id='appended'>Hello</p>"));
});
As you can see, it's fairly obvious what his does. This created something of a rough example, but it's a working example nonetheless.
I currently have a navigation that is based on the bellow image. (sorry about the terrible sketch) I have a tab along the top called "films" that is also classed as a department.
I would like the tab "films" to open the sub cat films located in the department tab as though the mouse was hovered over that.
Currently the department "films" is a list item under an ordered list of department and has an ID of MM05.
The tab "films" is again another li in an unordered list for the top bar that originally had its own drop down.
Not sure how I can get around this!
This is sadly not possible just using CSS as "Cascading" means that you can only go downwards with your selectors.
You would have to use Javascript for this.
This would look something like this
<script>
var linkToOpenDropDown=document.getElementbyId("filmLink");
var dropDown=document.getElementbyId("dropDownList");
linkToOpenDropDown.onmouseover=function() {
dropDown.style.visibility='visible';
};
linkToOpenDropDown.onmouseout=function() {
dropDown.style.visibility='hidden';
};
</script>
From your drawing, I am thinking you will have a static DIV that holds a sub menu. So on click it would "visibility: hidden / visible" change to what you need. I assume that is the location where you want it to show, so mouse over wouldn't work since you can reach it from the button location with out going mouseout...
Please do provide little more code or info on this, thanks.
If i understood correctly, I would make that a onclick (show, hide) type DIV, and have that div with LI use onMouseOver Show / Hide additional panels
I am working on an algorithm that will try to pick out, given an HTML file, what it thinks is the parent element that most likely contains the majority of the page's content text.
For example, it would pick the div "content" in the following HTML:
<html>
<body>
<div id="header">This is the header we don't care about</div>
<div id="content">This is the <b>Main Page</b> content. it is the
longest block of text in this document and should be chosen as
most likely being the important page content.</div>
</body>
</html>
I have come up with a few ideas, such as traversing the HTML document tree to its leaves, adding up the length of the text, and only seeing what other text the parent has if the parent gives us more content than the children do.
Has anyone ever tried something like this, or know of an algorithm that can be applied? It doesn't have to be solid, but as long as it can guess a container that contains most of the page content text (for articles or blog posts, for example), that would be awesome.
One word: Boilerpipe
Here's roughly how I would approach this:
// get array of all elements (body is used as parent here but you could use whatever)
var elms = document.body.getElementsByTagName('*');
var nodes = Array.prototype.slice.call( elms, 0 );
// get inline elements out of the way (incomplete list)
nodes = nodes.filter(function (elm) {
return !/^(a|br?|hr|code|i(ns|mg)?|u|del|em|s(trong|pan))$/i.test( elm.nodeName );
});
// sort elements by most text first
nodes.sort(function(a,b){
if (a.textContent.length == b.textContent.length) return 0;
if (a.textContent.length > b.textContent.length) return -1;
return 1;
});
Using ancestry functions like a.compareDocumentPosition(b), you can also sink elements during sorting (or after), depending on how complex this thing needs to be.
You will also have to formulate a level on which you want to select the node. In your example, the 'body' node has an even larger amount of text in it. So you have to formulate what a 'parent element' exactly is.
You could create an app that looks for contiguous block of text disregarding formatting tags (if required). You could do this by using a DOM parser and walking the tree, keeping track of the immediate parent (because that is your output).
Start form parent nodes and traverse the tree for each node that is just formatting, it would continue the 'count' within that sub block. It would count the characters of the content.
Once you find the most content block, traverse back up the tree to its parent to get your answer.
I think your solution relies on how you traverse the DOM and keep track of the nodes that you are scanning.
What language are you using? Any other details for your project? There may be language specific or package specific tools you could use as well.
I can also say that word banks are a great help. Any lists of common 'advertisey' words like twitter and click and several capitalized nouns in a row. Having a POS tagger can improve accuracy. For news sites, a list of all known major cities in the world can help separate. In fact, you can almost scrape a page without even looking at the HTML.