How to link to a <div> on another page? was showing how to Link text to a div id, but what I am looking to do is write one web page that is linked from other pages but hides all content but what the link id says to show. o page1 link to infopage.html with content A visible and page2 link to infopage.html with content B visible, page3 link to infopage.html with content C visible and so on. using plain HTML, CSS and vanilla JavaScript. no jQuery please; trying to learn how this would tie together. hope I explained this well enough
One option is to use the :target selector.
You hide all the content in CSS with the use of display: none;. Then you can show the content when the link is clicked by using *:target { display: block; }
If you want to load content from other websites, you can either use PHP include or iframe. However you cant show only specific parts of the website that easily. You would need to overwrite its default styling with the same emthod mentioned above.
main > div {
display: none;
}
main > div:target {
display: block;
}
/* For Styling Pupose only */
nav ul {
display: flex;
list-style: none;
}
nav li {
margin: 0 10px;
}
<nav>
<ul>
<li>Content A</li>
<li>Content B</li>
<li>Content C</li>
</ul>
</nav>
<main>
<div id="A">This is Content A</div>
<div id="B">This is Content B</div>
<div id="C">This is Content C</div>
</main>
Here's a quick and dirty way to make that happen:
all the articles are hidden by default
window.location.href.split('#')[1] will get you the anchor name
classList.remove('hidden') removes the hidden class from the selected article
page1.html
<style> .hidden { display: none; }</style>
<div id="article1" class="hidden"><h2>Article 1</h2></div>
<div id="article2" class="hidden"><h2>Article 2</h2></div>
<p>Go to Article 3</p>
<p>Go to Article 4</p>
<script>
document.querySelector(`#${window.location.href.split('#')[1]}`).classList.remove('hidden');
</script>
page2.html
<style>.hidden { display: none; } </style>
<div id="article3" class="hidden"><h2>Article 3</h2></div>
<div id="article4" class="hidden"><h2>Article 4</h2></div>
<p>Go to Article 1</p>
<p>Go to Article 2</p>
<script>
document.querySelector(`#${window.location.href.split('#')[1]}`).classList.remove('hidden');
</script>
Related
As the question says I want to make hypertext in my page which contains 4 tabs (R Markdown file knitted as HTML).
I know this method works well within the same page that doesn't have different tabs but it didn't work with me.
Using the #id selector
<p id="opening">Hyperlinks are utilized by a web browser to move from one page to another...</p>
Creating a link to the selector
Take me to the opening paragraph.
Can you please help me with that?
For example in the "home" tab I want a hypertext that directs the user to a specific section in "about us" tab
Thanks in advance
Btw, I am using HTML with R Markdown to knit the file.
This is something that you can do. You can assign a width and height for your container, then overflow: auto. Each children has to have the same height and same width as the container, therefore, if you have several children, this will overflow.
What the hyperlink or tab does when you click, it scroll to view on the said children.
.container {
width: 200px;
height: 200px;
overflow: auto;
}
.child {
display: block;
background: aliceblue;
height: 200px;
}
<div class="container">
<div class="tabs">
Tab-1
Tab-2
Tab-3
</div>
<div id="Tab-1" class="child">
Tab 1
</div>
<div id="Tab-2" class="child">
Tab 2
</div>
<div id="Tab-3" class="child">
Tab 3
</div>
</div>
The HTML structure of the header is not ideal, but cannot be changed at this time.
Here is the HTML:
<nav>
About
<a class="speakingdropbtn" href="">Speaking</a>
<div class="speakingdropdown">
Assemblies
Religious
Corporate
</div>
Products
Media
Contact
Blog
</nav>
I'm trying to make it display the div with the class "speakingdropdown" when I hover over the anchor tag with the class "speakingdropbtn"
What CSS or JS or JQuery would I need to use to make that happen? I can post CSS, but there's a ton of it because the whole header is fully responsive.
You can use css adjacent sibling selector +, :hover pseudo class
div.speakingdropdown {
display: none;
}
a.speakingdropbtn:hover + div.speakingdropdown {
display: block;
}
<nav>
About
<a class="speakingdropbtn" href="">Speaking</a>
<div class="speakingdropdown">
Assemblies
Religious
Corporate
</div>
Products
Media
Contact
Blog
</nav>
$('.speakingdropbtn').hover(function() {
$('.speakingdropdown').show();
},
function() {
$('.speakingdropdown').hide();
});
Without any css styles, this is the most basic implementation. We hide the dropdown and then on hover we use jQueries .show() method.
$(".speakingdropbtn").hover(function(){
$(".speakingdropdown").show()
})
.speakingdropdown {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
About
<a class="speakingdropbtn" href="">Speaking</a>
<div class="speakingdropdown">
Assemblies
Religious
Corporate
</div>
Products
Media
Contact
Blog
</nav>
I have a list of questions and answers. I want a Plus/Minus icon to toggle, and when it is clicked, the answer appears below. I have written up the basic code, but when I click the Plus button for one of the questions, it toggles the answer to display on all of the questions rather than just that specific one. Please see the jsfiddle.
JS:
$(".plus").click(function(){
$(this).toggleClass("minus plus");
});
$(".plus").click(function(){
$(".answer").toggle();
});
How do I get it so that if I press the icon for Question 1, it only shows me Answer 1, and doesn't toggle the other icons?
Here's an updated JSfiddle: https://jsfiddle.net/ocm81sv8/7/
I would do your script like this:
JavaScript
$(".plus").click(function(){
var $this = $(this);
$this.toggleClass("minus plus");
$this.parent().next(".answer").toggle();
});
HTML
<div class="faq-block">
<ul>
<li class="question">
<p><span class="plus"></span>Question 1</p>
<p class="answer" style="display: none;">Answer 1</p>
</li>
<li class="question">
<p><span class="plus"></span>Question 2</p>
<p class="answer" style="display: none;">Answer 2</p>
</li>
</ul>
</div>
I removed having 2 click handlers for the same item and placed them into one call.
I also corrected your .plus elements to be span tags, as it's invalid for a block level element like div to be within p tags.
Updated Fiddle
You should replace <p><div class="plus"></div>Question 1</p> by <p><span class="plus"></span>Question 1</p> since <p><div></div></p> is not a valid HTML code, check the following post Putting <div> inside <p> is adding an extra <p>.
You should toggle the related answer with clicked .plus, so you could use closest('li') to get the parent question then .find(".answer") to target the related answer :
$(".plus").click(function(){
$(this).closest('li').find(".answer").toggle();
});
Instead of :
$(".plus").click(function(){
$(".answer").toggle();
});
Hope this helps.
$(".plus").click(function(){
$(this).toggleClass("minus plus").closest('li').find(".answer").toggle();
});
.faq-block ul, .faq-block ul li {
list-style-type: none !important;
}
span.plus {
display: block;
width: 30px;
height: 30px;
background-color: red;
float:left;
margin-right: 20px;
cursor:pointer;
}
span.minus {
display: block;
width: 30px;
height: 30px;
background-color: blue !important;
float:left;
margin-right: 20px;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq-block">
<ul>
<li class="question">
<p><span class="plus"></span>Question 1</p>
<p class="answer" style="display: none;">Answer 1</p>
</li>
<li class="question">
<p><span class="plus"></span>Question 1</p>
<p class="answer" style="display: none;">Answer 1</p>
</li>
</ul>
</div>
The fact that you're already using $(this) to get the currently clicked-on element, and yet still fail to use that to get the right target, makes me sad...
First things first. It is not valid to have <div> inside a <p> tag, causing JSFiddle to highlight these errors. It can be fixed by using <span> instead of <div>.
Now, as for doing the toggle, just navigate your way through the DOM:
$(this).closest(".question").find(".answer").toggle();
Navigates up the tree to the .question, then back down to the .answer, and toggles it.
https://jsfiddle.net/ocm81sv8/3/
https://jsfiddle.net/ocm81sv8/8/
$(".plus").on('click', function() {
$(this).toggleClass("minus plus")
.closest('li').find(".answer").toggle();
});
This will make sure if you click on a plus element, it will only toggle its own item, and then find the answer to show.
You need to use a more specific selector. Currently, you are using the class selector ".plus", which is going to be something common to all your questions. It is not a unique identifier. Your code will match all elements that fit your selector scope. To see what I mean, just enter $(".plus") in the chrome console on that page. It will return an array consisting of all the elements that match.
My suggestion is add a unique id to each question, so perhaps something like "question-0", "question-1" ... and so on, then use the selector "#question-X" to toggle it.
Hopefully that helps,
Good luck
<div id="box1"> <img src="images/pskeksmall.jpg" alt="" />
<h2 class="subtitle">Student Makes our new website</h2>
<p>We are very proud to announce that our new website was designed and created by Charlie Johnson</p>
<ul class="contact">
<li><span></span></li>
<li><span>Pinterest</span></li>
<li><span>Google+</span></li>
</ul>
</div>
What I want this to do is open in a small window, and have more information on the topic. I've only looked briefly at JavaScript, so if there's an easy way to do this without JScript it would be preferable. I need to do this for 3 other boxes too.
EDIT: Maybe I wasn't very clear, I don't want to user to leave the page, at all, using Chrome I know that popups open in the small dialogue box, this is what I want the information to be provided by. If this isn't possible, is there a way that I could change the information in the main text area, without changing the page?
EDIT 2: OK so I found this on W3Schools.com:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>JavaScript in Head</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
So I'm now wondering if it would be possible to use my image in substitute to the button, and change my instead of the paragraph used above.
The easy HTML way to do this is to use a tags with the target attribute:
Try it
A tag documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
Here is a CSS-only example of how you can click-to-reveal a (usually hidden) element which can then display more information.
No javascript needed!
.more-info {
display: none;
background-color: rgba(255,255,127,1);
padding: 6px;
border: 2px solid rgba(127, 0, 0, 1);
}
#item1:target, #item2:target {
display: inline-block;
}
<ul>
<li>Click me for more info about Item 1</li>
<li>Click me for more info about Item 2</li>
</ul>
<p id="item1" class="more-info">Now you can read more information about Item 1</p>
<p id="item2" class="more-info">Now you can read more information about Item 2</p>
I'm using jquery-ui tabs to create a page with a menu. I decided to have a graphic like below for my website
But ends up to this:
As you can see I can not fulfill my wishes. There are something that I can not modify on jquery-ui, at least I don't know how to resolve it. Because styling applies to all materials I could not change first and last ul>li. I explicit it in below picture:
I added my script to jsfiddle for showing what I have done.
http://jsfiddle.net/fad6d85o/
Now My two certain questions are listed below:
1- how to apply different css to first and last ul>li?
2- How can I define for example width:25% for ul>li>a links? I want to define container width:800px and then set width: 100/n % for ul>li>a links.
.ui-widget-content a {
color: #333333;
padding: 60px;
line-height: 4.3em;
}
I have done above changes but it's not nice when a string is long and another one is short. it would not be as size as each other.
add this to your css:-
.ui-tabs-nav li:last-child
{
border-radius:4px 0px 0px 4px;
}
.ui-tabs-nav li:first-child
{
border-radius:0px 4px 4px 0px;
}
Demo
Please Check the fiddle
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tabs-1">
<p>Content for Tab 1</p>
</div>
<div id="tabs-2">
<p>Content for Tab 2</p>
</div>
<div id="tabs-3">
<p>Content for Tab 3</p>
</div>
</div>
I guess this is what you are looking for as far as i understood your question.
Please mark me correct if i am correct or if some more issues are there i am ready to help out. Cheers......