As you can tell from my code. I am very new to this so, please try to keep your answers simple.
The assignment was to make the whatever name is entered comes back in uppercase which I did.
But I want everything to show in uppercase, both the name and paragraph. I have tried everything that I can think of, I feel like it's something simple.
This is what I have so far:
$(document).ready(function() {
$("#letter form").submit(function(event) {
var nameInput = $("input#name").val().toUpperCase();
$(".name1").text(nameInput);
$("#response").show();
event.preventDefault();
});
});
#response {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!--link href="css/styles.css" rel="stylesheet" type="text/css"-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--script src="js/scripts.js"></script-->
<div class="container">
<h1>Fill in the blanks to write your story!</h1>
<div id="letter">
<form>
<div class="form-group">
<label for="name">A name</label>
<input id="name" class="form-control" type="text">
</div>
<button type="submit" class="btn">Show me the response</button>
</form>
</div>
<div id="response">
<h1>A fantastical adventure</h1>
<blockquote>
<p><span class="name1"></span>, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</blockquote>
</div>
</div>
Assuming that you want it for ALL your <p> tags, you jQuery selectors follow the same rules as CSS selectors. With this in mind you can get the innerText with jQuery .text():
// Select ALL p tags, and set their text to upper case
$('p').text($('p').text().toUpperCase());
If you want it specifically for the first parent paragraph that contains a child with the class name1 we can use a similar idea with jQuery .closest():
// Split into a var to help readability
// Grab the "closest ancestor" (get the first parent that is a p)
var closestP = $('.name1').closest('p');
closestP.text(closestP.text().toUpperCase());
I hope this is what you're looking for!
Edit: Another way that requires editing the html for that specificp:
HTML
<div id="response">
<h1>A fantastical adventure</h1>
<blockquote>
<p id="toCapital"><span class="name1"></span>, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</blockquote>
</div>
jQuery
$('#toCapital').text($('#toCapital').text().toUpperCase());
Here I used a similar idea to the first example, except instead of selecting ALL paragraph tags, I added an id to the existing one, selected that, and then modified the text.
You could also do a little more advanced selection, but this will not select the same paragraph that you want to capitalize if you add any more beforehand:
var first = $('p').first();
first.text(first.text().toUpperCase());
I'm sure you can see where I'm going with these, the key is to think about how you can identify what you want to change, it's tricky at first but it gets easier as you start to understand the differences between name, class, id, as well as the other attributes and how you can combine them to create unique combinations.
To make ALL the response to uppercase:
$("#response").html($("#response").html().toUpperCase());
.html() sets and returns all the text and markup of the element selected...
It's on the biggest container $("#response") that you have to apply the toUpperCase() method.
See below:
$(document).ready(function() {
$("#letter form").submit(function(event) {
event.preventDefault();
var nameInput = $("input#name").val().toUpperCase();
$(".name1").text(nameInput);
$("#response").html($("#response").html().toUpperCase());
$("#response").show();
});
});
#response {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!--link href="css/styles.css" rel="stylesheet" type="text/css"-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--script src="js/scripts.js"></script-->
<div class="container">
<h1>Fill in the blanks to write your story!</h1>
<div id="letter">
<form>
<div class="form-group">
<label for="name">A name</label>
<input id="name" class="form-control" type="text">
</div>
<button type="submit" class="btn">Show me the response</button>
</form>
</div>
<div id="response">
<h1>A fantastical adventure</h1>
<blockquote>
<p><span class="name1"></span>, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</blockquote>
</div>
</div>
Related
I have been told that this isn't possible via CSS alone and so have turned to javascript.
Using onmouseover but I cannot get the hidden element to appear. I want it so that when hovering over element with ID #a, element with class .excerpt-box appears and then disappears when the mouse is moved away.
Does anyone know where I am going wrong? Thanks
Here's the code I've written so far:
The CSS includes visibility hidden for .excerpt-box.
<div class="ind-circle" id="a" onmouseover="showExcerpt()">
<p class="circle-title"> Read more</p>
</div>
<div class="excerpt-box" id="b">
<h1 class="excerpts-title">This is an example excerpt title...</h1>
<img class="excerpts-fi" src="<?php echo BASE_URL . '/assets/images/water.jpg'; ?>" alt="">
<p class="excerpts-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
function showExcerpt() {
document.getElementByClass('excerpt-box').style.visibility = 'visible';
}
First, the function you are looking for is document.getElementsByClassName.
After this you have to select a particular element by index. See this link.
Better would be this solution:
Grab the id of the div (id='b') and set display to block.
As you can see, the div is display:none; at startup.
function showExcerpt() {
document.getElementById('b').style.display = 'block';
}
.excerpt-box {
display: none;
}
<div class="ind-circle" id="a" onmouseover="showExcerpt()">
<p class="circle-title"> Read more</p>
</div>
<div class="excerpt-box" id="b">
<h1 class="excerpts-title">This is an example excerpt title...</h1>
<img class="excerpts-fi" src="<?php echo BASE_URL . '/assets/images/water.jpg'; ?>" alt="">
<p class="excerpts-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Your HTML structure allows to do the same via CSS as well.
.excerpt-box goes right after the .ind-circle and can be targeted via adjacent sibling combinator.
.excerpt-box {
display: none;
}
.ind-circle:hover + .excerpt-box {
display: block;
}
I am using anchor tags to link navbar to the headers inside of a div on same page. When I click on the last header it shows up in the middle of the container instead of at the very top.
I want the bottom header to show up at the very top of the container and leave some white space below it.
Here is codepen https://codepen.io/sasha-code/pen/qBOyBrW
Is there an html way to do it? if not, is there a js way to add white space dynamically below the last section to make sure the header is at the top.
PS. I know this is happening because there is no scroll left. I want to somehow add it dynamically. I don't want to add hardcoded white space.
<div>
<a href='#top'>Top</a>
<a href='#middle'>Middle</a>
<a href='#bottom'>Bottom</a>
</div>
<div class="content">
<div>
<h2 id="top">Header Top</h2>
text
</div>
<div>
<h2 id="middle">Header Middle</h2>
text
</div>
<div>
<h2 id="bottom">Header Bottom</h2>
text
</div>
You could set the min-height of the last div section to 100% of the parent:
.content {
height: 400px;
width: 300px;
overflow:scroll;
}
#last {
min-height: 100%;
}
<div>
<a href='#top'>Top</a>
<a href='#middle'>Middle</a>
<a href='#bottom'>Bottom</a>
</div>
<div class="content">
<div>
<h2 id="top">Header Top</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div >
<h2 id="middle">Header Middle</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="last">
<h2 id="bottom">Header Bottom</h2>
Lorem ipsum dolor sit amet.
</div>
</div>
Put this code at the end of your file:
<br> <br> <br>
Now it should work fine 😊
My goal is to have a button that onclick will call a function to change the styling of the html tag and the text (or innerHTML) of the button itself. Shouldn't be that hard, right? Well...
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New look for my site!</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="change-template.js"></script>
</head>
<body>
<aside>
<button type="button" id="template-button" onclick="changeTemplate()">Nightmode: On</button>
</aside>
<main>
<h1>New page look for my site</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
</body>
</html>
CSS (main.css):
html{
background: "#111";
color: "#0F0";
}
JS (change-template.js):
var html = document.getElementsByTagName('html')[0];
var button = document.getElementById('template-button');
var nightmode = true;
function changeTemplate(){
//change to lighter color if black and vice versa
if(nightmode){
html.style.background = "#EEE";
html.style.color = "#000";
button.innerHTML = "Nightmode: OFF";
}else{
html.style.background = "#111";
html.style.color = "#0F0";
button.innerHTML = "Nightmode: ON";
}
nightmode = !nightmode;
}
And I'm getting this error
Uncaught TypeError: Cannot set property 'innerHTML' of null
at changeTemplate (change-template.js:10)
at HTMLButtonElement.onclick (new-look.html:11)
So please help me it's 90 degrees and I'm sitting here on the verge of hunger stressed about this simple issue and can barely think.
That is because, your script is parsed, event before the elements are available in the DOM.
When the parser encounters var button = document.getElementById('template-button'); the element is not yet available in the DOM.
Because of which your code is technically doing this.
undefined.innerHTML
Move the script tag to just above the closing body tag. This will fix the issue since the elements are available in the DOM, when they get stored in the variables.
</main>
<script src="change-template.js"></script>
</body>
if you still want to include your script in the head, the other way around is wrap the code in document.onload which triggers, when the DOM is ready.
document.onload = function(e) {
// your code goes here
};
I try to insert an element ( a div for example ) on the half of the div and just after a double <br /> element
here my code it just an example the div could be longer or smaller
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript">
$( document ).ready(function() {
console.log( "ready!" );
var h_div = $('#my_post').height();
});
</script>
</head>
<body>
<div id='container'>
<div id='my_post'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
</div>
</div>
</body>
</html>
Should I use position() function in Jquery to do that ?
How about:
$('br:eq(1)', '#my_post').after('<div>whatever ...</div>');
This would insert a div within #my_post after the second <br>
Ok, let's break that down a bit more:
$('br') is a jquery selector that returns a collection of all <br> elements in the document. Since you need only the <br> in a specific container we limit the search to this container: $('br', '#my_post'). Now you have a collection of all <br> elements within the div #my_post. Now we add the filter :eq() which selects only a specific one of the <br> elements. Since :eq() is zero index based we use the number 1 to get the second <br> element.
Now we use the jquery method .after() to insert content after the element we specified with the selector $('br:eq(1)', '#my_post')
You might want to take a look at the jquery docs: http://api.jquery.com/after/
Consider the following example:
<html>
<head>
</head>
<body>
<style type="text/css">
.hide
{
display: none;
}
</style>
<button style="width:200;height:20;background-color:#B4CFEC;font: bold 10px Verdana" onclick="document.getElementById('CUST_CLASS').classList.remove('hide');" >CUSTOMER DIMENSION</button>
<div class="hide" id="CUST_CLASS">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
</body>
</html>
I am using the document.getElementById('id').classList.remove('class'); function here.
Should I use a different function? Something Microsoft only?
This is hideous, but removes the specified class, retaining all others:
onclick="document.getElementById('CUST_CLASS').setAttribute('class', document.getElementById('CUST_CLASS').getAttribute('class').replace('hide', ''));"
As commented, IE9 doesn't support classList, so you can either shim it, or fall back to jQuery, which would handle browser compatibility. This is the jQuery equivalent to your code:
$("#CUST_CLASS").removeClass("hide");
However, if your hide class is used for nothing more than toggling visibility, you could simplify even more:
$("#CUST_CLASS").hide();
$("#CUST_CLASS").show();