Simple Sibling() jquery issue. Not appending class to div - javascript

So I'm trying to append a class to my div which are children of a section and i've ran into some trouble.
Here is the basic code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Assignment 7 Starter File</title>
<style>
body {
font-family:arial; font-size: 100%;
}
#outer {
width: 800px;
margin-left: auto;
margin-right: auto;
border: 1px solid #000;
padding: 10px;
}
h2 {
font-size: 16pt;
margin-bottom: 0px;
}
h1 {
font-size: 1.5em;
text-align: center;
}
div {
margin-bottom: 25px;
}
p {
margin: 0px;
padding: 10px;
}
.bottomBorder {
border-bottom: 1px dashed #000;
}
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("a").attr("target" , "_blank"); // makes tabs open in new tab
$("section #faq").siblings("div").addClass("bottomBorder"); //adds the class to the bottom of each div. Adds dots.
$("<aside><h2> Links used:</h2></aside>").insertAfter("section #faq");
$("a").clone().appendTo("aside").append("<br />");
});
</script>
</head>
<body>
<header>
<h1>FAQ</h1>
</header>
<section id="outer">
<section id="faq">
<div>
<h2> What is jQuery?</h2>
<p>jQuery is a JavaScript library intended to make writing JavaScript easier and fun. For more information visit jQuery.com.
</p>
</div>
<div>
<h2>How did jQuery Begin?</h2>
<p>
jQuery was developed in 2006 by John Resig, who is still the lead developer. For more information visit ejohn.org
</p>
</div>
<div>
<h2>What is the jQuery UI?</h2>
<p>
jQuery UI provides abstractions for low-level interaction and animation.
Visit jQueryui.com
</p>
</div>
<div>
<h2>What is Minification?</h2>
<p class="content">
Minification is the process of removing all unnecessary characters from source code.
</p>
</div>
</section>
</section> <!-- end outer -->
</body>
</html>
So basically i just want to insert that class into the div. But it won't work. It'll work just fine if the code is just a simple append without the sibling but it can't seem to get the sibling part down. any ideas?

Try using children function:
$("section #faq").children("div").addClass("bottomBorder");
example fiddlejs

You've got it pretty much right, but your jQuery selector is a little off. You're trying to put the class on that first div right? If so, this should work:
$("section#faq div").eq(0).addClass("bottomBorder");
Notice there's no space between section and #faq and then the eq(n) lets you pick which of the divs you want, 0 being the first.
[EDIT updated answer from comments:]
To add a class to all the divs matched by the selector, just add the class to that jQuery result array directly:
$("section#faq div").addClass("bottomBorder");
Notice that all the work is being done by the selector, which will match all divs inside a section that has the id "faq".

Related

Horizontal scrolling menu sticking after transform: translate(X) is applied, and Is it possible to detect when the user scrolls back up past an ID?

On my website, I have a case study page that is pretty long with 10 sections, so I want to create a horizontal menu with links to each section on the page. The user will be able to swipe this horizontally for the small screen devices so that the user can access links that would normally be off the viewport canvas.
I understand how to achieve all of that but what I need is this; when the user scrolls down and reaches the fifth section who's menu link is slightly off-canvas to the right, the menu will slide left enough so that the link icon appears into the viewport stopping on the far left. This will, in turn, bring the other links that follow on from that one onto the canvas too.
The problem though is that if I add a class to the scrolling menu container which assigns a transform: translate(X) value and therefore animates it to the left when the user reaches the particular section, the whole menu fixes at that point, and it's not possible for the user to then manually swipe the menu back and forth to access any menu link they desire from that point on.
I also want the same to happen in reverse, so that after the above has triggered and the menu has shifted along to the left, when the user decides to scroll back up the page and past the section that triggered the initial menu slide action, it slides back to the right to its original position.
This behavior with the menu slide being triggered should happen each and any time the user scrolls past that certain point in either direction (up or down), yet the user should still be able to manually swipe the menu to any point either way.
I know all of this must be possible using Javascript but I've tried loads of different ideas, including element.scrollintoView, which doesn't work since assigning that to one IDs in the menu doesn't slide the whole menu over. I've also tried moving the menu by adding an animated class but that didn't work either.
Update:
I've created a basic example on code pen:
https://codepen.io/creativezest/pen/MWyqPYL
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Horizontal Scrolling Menu</title>
<meta name="description" content="An interactive getting started guide for Brackets.">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<wrapper>
<div class="container heading">
<h1>Horizontal Scrolling Menu</h1>
</div>
<section id="home" class="page-section">
<div class="container">
<h2>Home</h2>
</div>
</section>
<section id="news" class="page-section">
<div class="container">
<h2>News</h2>
</div>
</section>
<section id="contact" class="page-section">
<div class="container">
<h2>Contact</h2>
</div>
</section>
<section id="about" class="page-section">
<div class="container">
<h2>About</h2>
</div>
</section>
<section id="support" class="page-section">
<div class="container">
<h2>Support</h2>
</div>
</section>
<section id="blog" class="page-section">
<div class="container">
<h2>Blog</h2>
</div>
</section>
<section id="tools" class="page-section">
<div class="container">
<h2>Tools</h2>
</div>
</section>
<section id="base" class="page-section">
<div class="container">
<h2>Base</h2>
</div>
</section>
<section id="custom" class="page-section">
<div class="container">
<h2>Custom</h2>
</div>
</section>
<section id="testimonials" class="page-section">
<div class="container">
<h2>Testimonials</h2>
</div>
</section>
<section id="more" class="page-section">
<div class="container">
<h2>More</h2>
</div>
</section>
<div id="scrollmenu">
<div class="scroll-links-container">
Home
News
Contact
About
Support
Blog
Tools
Base
Custom
Testimonials
More
</div>
</div>
</wrapper>
body, html {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
background-color: white;
}
html {
scroll-behavior: smooth;
}
wrapper {
display: block;
width: 360px;
margin: 0 auto;
background-color: black;
padding-top: 20px;
}
h1 {
font-family: sans-serif;
font-size: 3.5rem;
color: white;
padding: 0px 20px;
}
h2 {
font-family: sans-serif;
font-size: 2.5rem;
color: white;
}
section {
width: 360px;
background-color: transparent;
}
.container.heading {
padding: 20px 20px 20px 20px;
}
.container {
padding: 200px 40px 200px 40px;
}
div#scrollmenu {
position: fixed;
bottom: 0;
background-color: #333;
overflow: auto;
white-space: nowrap;
width: 360px;
margin: 0 auto;
text-align: center;
padding: 0;
margin: 0;
}
div#scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 25px 25px;
text-decoration: none;
}
div#scrollmenu a:hover {
background-color: #777;
}
.active {
background-color: #777;
}
.slide-about-left {
transform: translateX(-300px);
transition: transform 0.5s;
}
$(window).scroll(function() {
var hT = $('#about').offset().top,
hH = $('#about').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT+hH-wH)){
$(".scroll-links-container").addClass("slide-about-left");
}
});
</body>
</html>
You'll see I've added some javascript to attempt to get the menu to scroll left when the page is scrolled down to the #about section so that the 'about' link in the bottom menu slides to the far left of the viewport. But it doesn't seem to be working.
As I explained in my previous post, this is what I am trying to achieve as well as make the menu scroll backward so that the 'home' link is in its original position on the far left of the viewport when the user scrolls back up past the #about section.
I also need the user to still be able to manually swipe the menu left and right after the above behaviors have taken place.
I would really appreciate any help anyone can give on this.
Many thanks.
Marc

Is it possible to add two phone numbers as links in a certain place on a JPGEG image via javascript/html/css

I want to add two phone numbers on a picture, so that the user can click on the phone number (mobile view) and call it.
I use Wordpress Theme Accesspress Parallax and have add the image via theme options in a blank section.
To the Picture : I have photoshop two telephone numbers to a transporter like these
Is it even possible to do something like this ?
You can use HTML area tag, used for mapping specific areas of a image to clickable elements.
Doc and examples here: https://www.w3schools.com/tags/tag_area.asp
<html>
<head>
<style>
.image {
position: relative;
width: 100%; /* for IE 6 */
}
.phonenumber{
position: absolute;
top: 100px;
left: 0;
width: 100%;
display: block;
text-shadow: 2px 2px #ff0000;
font-size: 2rem;
font-weight: bold;
color:blanchedalmond;
}
</style>
</head>
<body>
<div class="image">
<img src="http://www.imecar.com/wp-content/uploads/thumb-cache/CAG_8668-61f4fc962c673b1bc874ede912ae7086-500x400-100-crop.jpg"
alt="" />
<div class="phonenumber">
<h2> here is your first phone number</h2>
<h2>here is your second phone number</h2>
</div>
</div>
</body>
</html>

Using jQuery's tabify to create tab menu in website (HTML+CSS)

I'm trying to implement a tab navigation menu.
I found this fiddle example http://jsfiddle.net/S78Bt/3/ doing exactly what I want to do. However, I can't get the tabify to work.
Programmatically change tab using tabify jquery plugin
In the above question, I found the tabify function is not being maintained, so instead we have to type it out, I reckon I made a mistake in completely attaching the JS with my webpage since the buttons (tabs) don't respond at all.
Here's my code:
JS script:
<script>
(function(a){a.fn.extend({tabify:function(e){function c(b){hash=a(b).find("a").attr("href");return hash=hash.substring(0,hash.length-4)}function f(b){a(b).addClass("active");a(c(b)).show();a(b).siblings("li").each(function(){a(this).removeClass("active");a(c(this)).hide()})}return this.each(function(){function b(){location.hash&&a(d).find("a[href="+location.hash+"]").length>0&&f(a(d).find("a[href="+location.hash+"]").parent())}var d=this,g={ul:a(d)};a(this).find("li a").each(function(){a(this).attr("href", a(this).attr("href")+"-tab")});location.hash&&b();setInterval(b,100);a(this).find("li").each(function(){a(this).hasClass("active")?a(c(this)).show():a(c(this)).hide()});e&&e(g)})}})})(jQuery);
$(document).ready(function(){
function getHref(el){
hash = $(el).find('a').attr('href');
hash = hash.substring(0,hash.length-4);
return hash;
}
function setActive(el){
$(el).addClass('active');
$(getHref(el)).show();
$(el).siblings('li').each(function(){
$(this).removeClass('active');
$(getHref(this)).hide();
});
}
$('#ulaa').tabify();
setActive($('#target'));
});
</script>
And here's the UL that I'm trying to put in tabs:
<ul id="ulaa">
<li class="active">abcd</li>
<li id="target" >asdbk</li>
<li>texte</li>
<li>foo</li>
<li>inserttexthere</li>
</ul>
<div class="contenta" id="a">
jQuery is a cross-browser…
</div>
<div class="contenta" id="bb">
The Prototype JavaScript…
</div>
<div class="contenta" id="c">
Ext (X-t) is a JavaScript…
</div>
That's it. I have all this in just the one HTML file. Is there something more I need to do?
Basically, on clicking a tab the link's class should change to 'active' and the previous one that already has 'active' should be removed (made class-less)
and then underneath the horizontal tabs a div should be shown corresponding to the ID and the href.
What's wrong with this code?
I put the following code in a page and uploaded it to my website and works exactly the way the fiddle works.
If you don't include jQuery in your header, you'll get a page that looks like yours.
CODE
<!DOCTYPE html>
<head>
<title>Limerick OneLimerick TwoLimerick</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
body { font: 0.8em Arial, sans-serif; }
.menu { padding: 0; clear: both; }
.menu li { display: inline; }
.menu li a { background: #ccf; padding: 10px; float:left; border-right: 1px solid #ccf; border-bottom: none; text-decoration: none; color: #000; font-weight: bold;}
.menu li.active a {
background: #eef;
}
.content { float: left; clear: both; border: 1px solid #ccf; border-top: none; border-left: none; background: #eef; padding: 10px 20px 20px; width: 400px; }
</style>
</head>
<body>
<div class='mytabs'>
<ul id="menu" class="menu">
<li>Limerick One</li>
<li>Limerick Two</li>
<li>Limerick Three</li>
</ul>
<div id="description" class="content">
<h2>Limerick One</h2>
<p>
The limerick packs laughs anatomical
In space that is quite economical,
But the good ones I've seen
So seldom are clean,
And the clean ones so seldom are comical.
</p>
</div>
<div id="usage" class="content">
<h2>Limerick Two</h2>
<p>
Let my viciousness be emptied,
Desire and lust banished,
Charity and patience,
Humility and obedience,
And all the virtues increased.
</p>
</div>
<div id="download" class="content">
<h2>Limerick Three</h2>
Hickere, Dickere Dock,
A Mouse ran up the Clock,
The Clock Struck One,
The Mouse fell down,
And Hickere Dickere Dock.
</div>
</div>
<script>
$('.mytabs').tabs()
$( '.menu li a' ).on('click', function(){
$( '.menu li a' ).css('background-color', '#ccf');
$( this ).css('background-color', 'green');
});
</script>
</body>
</html>

jquery.height() and float parameter in CSS

I'd noticed a strange behaviour of jquery.height() function. Have a look at the following code.
CSS:
div.text-field {
font-family: sans-serif;
margin: 3px;
float: left;
}
HTML:
<div id="someid">
<div class="text-holder">
<div class="text-field">text here</div>
</div>
</div>
JS:
console.log($("someid").find("text-holder").height());
The last line outputs 0 if I have float: left; in CSS file, and otputs real height if I remove float: left;. What is the reason of such a behaviour? Can I use height() function together with float: left;?
When float elements are within a container, that element does not apply the height of the container, because the element is no longer in the "flow". It is removed from the current element, and applied to it's parent, hence the issue. You can fix it by using either inline-block, or clear: both
I usually use a 0 height element with clear both as the last child in the container. This causes the container to "stretch" around the floating objects:
<div style="clear: both; line-height: 0; height: 0;"> </div>
This is a variant on the QuirksMode article, and has good cross browser compatibility.
I've rewritten your code to include it and demonstrate the results:
<html>
<head>
<title>test</title>
<style type="text/css">
div.text-field
{
border: 1px solid red;
font-family: sans-serif;
margin: 3px;
float: left;
}
div.text-holder
{
border: 1px solid blue;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#output1").text($("#someid1 .text-holder").height());
$("#output2").text($("#someid2 .text-holder").height());
});
</script>
</head>
<body>
<div id="someid1">
<div class="text-holder">
<div class="text-field">text here</div>
</div>
</div>
<br>
<div id="output1"> </div>
<br><br><br>
<div id="someid2">
<div class="text-holder">
<div class="text-field">text here</div>
<div style="clear: both; line-height: 0; height: 0;"> </div>
</div>
</div>
<br>
<div id="output2"> </div>
</body>
</html>
The demonstration can also be viewed on JSFiddle.
floats removes element from the space therefore it occupies 0 space. So height() is space it takes up that is 0
because floats remove the element from the normal flow. try using overflow:hidden
see the DEMO
for more details http://www.quirksmode.org/css/clearing.html
In jQuery the test script looks like:
console.log($("#someid").find(".text-holder").height());
if you modify the html to clear the float, the parent will gain height:
<div id="someid">
<div class="text-holder">
<div class="text-field">text here</div>
<div style="clear: both;"></div>
</div>
</div>
I had the same issue where I was using float for better element positioning. If however you (like me) know beforehand what the exact contents of the element will be, you can add a height attribute with a value (e.g. height: 30px) to your CSS class, so the jQuery .height() method does work.

Floating columns both ways in JavaScript

I am trying to float columns using CSS so they stack up evenly like on this blog: http://typeneu.com
It seems to be impossible using CSS so I am looking into JavaScript.
The website listed above uses this JavaScript file: http://typeneu.com/wp-content/themes/grid-a-licious/scripts/grid-a-licious.js
I have tried to implement it to experiment but it doesn't seem to be working.
Any links to tutorials on this subject or suggestions for getting it to work with JavaScript or CSS?
Edit: I would like the number of columns to be flexible with the screen resolution.
I have a site which basically has DIV's float left with a set pixel width. Depending on the resolution and window size I might have 1-n columns, You should be able to basically:
<style>
.myClass
{
float:left;
width:350px;
}
</style>
<div class="myClass>my content</div>
<div class="myClass>more content</div>
<div class="myClass>even more content</div>
To get a fixed number of columns I'd assume you can calculate the width using javascript or perhaps there is some other trick.
Edit
Ok looking at their JS file you need to make sure you match up your class and id's to match what they are expecting Looks like all your posts need to be ina div with an id of allposts.
Check out the HTML of the site you typenu site you referenced and get your html to match theirs.
Keep it simple. This should make a nice page... the css should include this:
.header,.bod,.footer { width: 700px; margin: 0 auto; }
.header { border-bottom: 3px solid #CCC; margin-bottom: 1.0em; }
.footer { border-top: 3px solid #CCC; padding-top: 1.0em; }
.first, .second, .third, .fourth { position: absolute; top: 0; left: 0;}
.first { width: 100px; left:10px;}
.second { width: 100px; left:110px;}
.third { width: 100px; left:220px;}
.fourth { width: 100px; left:330px;}
.clear,.tall { position: relative; } /*\*/* html .clear{ display: inline;}
.tall:after { content: ''; } /*fix of safari bug?*/
and some html (inside the body, after you have called the css):
<body>
<div class="header">TITLE</div>
<div class="bod clear">
<div class="first tall"> Lorem ipsum </div>
<div class="second"> Lorem ipsum </div>
<div class="third"> Lorem ipsum </div>
<div class="fourth"> Lorem ipsum </div>
</div>
<div class="footer" >FOOTER</div>
</body>
</html>
Simple, works, right?
After placing first component on the page, take dimensions of that, then place next components one by one on the UI using absolute placing.
That JavaScript file is actually part of this plugin:
http://suprb.com/apps/gridalicious/
It's not that hard to do in CSS, however. You just need to use floats.
For example:
<div style="float:left">Hello</div>
<div style="float:left">I'm also saying hello</div>
<div style="clear:both;"></div>
<div style="float:left">Hi again</div>
<div style="float:left">From the second line, that too!</div>
<div style="clear:both;"></div>
Is it clear enough?

Categories