I have a line that creates a simple box like so:
var box = $('<button>').addClass('box');
With using the css:
.box {
border-radius: 0.7vw;
width: 40vw;
height: 50vw;
margin: 30px;
display: inline-block;
background-color: #d87c2d;
}
All fine, I get those boxes, I can even click on them.
But what I really need is generating some usable elements.
For that, I usually like to keep components separate (hope I use the correct terminology), so I made a text file with the following content:
<div>
<div class="tile" id="eventName"> Event name</div><br/>
<div class="tile" id="eventDate">2017.01.01. </div>
<div class="tile" id="eventTime">12.00</div><br/>
<div class="tile" id="description">Some boring example description about the meaningless </div>
</div>
My goal is to put this inside the $(-here-) instead of the simple <button> I have there.
To get that I tried
var box = $('/html/tileInside').addClass('box');
but didn't work, I believe JS thinks I want just the string /html/tileInside there which obviously doesn't mean anything.
So is there a way to add a string from a txt file inside the jQuery string selector?
Use ajax here.
$('<div></div>').load('/html/tileInside');
http://api.jquery.com/load/
http://api.jquery.com/jQuery.ajax/
Related
I am new to JavaScript. Currently, I am working on a small toggle for my website.
The goal is to have three buttons that open up different sections with information. I have this working on my website. Now, what I want to achieve is to make other divs close when the others are opened up. Furthermore, I would like the first div to be open when the page is loaded, including an indicator (for example orange image) on the button. Can you please help me with this?
For some reason, the script works on my website, but not on the JSfiddle:
https://jsfiddle.net/q7evaLsn/1/
Current code:
$('.button1').click(function(){
$('.product').slideToggle('slow');
});
$('.button2').click(function(){
$('.lockedin').slideToggle('slow');
});
$('.button3').click(function(){
$('.developers').slideToggle('slow');
});
.button2
{
padding-top: 10px;
}
.button3
{
padding-top: 15px;
}
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/product-holder.png" class="button1" alt="Expand"/>
</h3>
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/lockedin-holder.png" class="button2" alt="Expand"/>
</h3>
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/developers-holder.png" class="button3" alt="Expand"/>
</h3>
<div class="product">
Testdiv1
</div>
<div class="lockedin">
Testdiv2
</div>
<div class="developers">
Testdiv3
</div>
Your help is greatly appreciated!
You can simply slide up everything before you start toggling.
For ex
$('.button3').click(function(){
$('.product').slideUp();
$('.lockedin').slideUp();
$('.developers').slideToggle('slow');
});
Your JSfiddle isn't working because you haven't included the jQuery library required for some of your functions. For future reference, jQuery is a popular javascript library which simplifies and extends some basic javascript functions, you can use both interchangeably however if you do want the extra features of jQuery then you'll have to include it like so in your HTML:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
As mentioned by #SURESH you'll likely want to slide the other areas up where you are toggling the target area:
$('.example-button').click(function(){
$('.section-to-hide-1').slideUp();
$('.section-to-hide-2').slideUp();
$('.section-to-toggle-1').slideToggle();
});
Just as further formatting advice, you have your images (that are acting as buttons) within header tags.
It's generally bad practice to use these header tags for anything
other than headings/titles
I'd recommend using A tags or even BUTTON tags to do the same job
I'd try not to use IMG tags as essentially text buttons, you will be able to style a button similarly like so:
<button class="button1">Products</button>
<style>
.button1 { text-align: center; padding: 10px; text-transform: uppercase: border-radius: 100%; border: 3px solid orange; background: white; color: #000; }
</style>
This will allow search engines/screen readers to read your button element, and you can make hover effects etc.
I'm working on Angular 2 now. In my template I'm using the following to show the data I get from the APIs
<div class="blocks">
<div router-active class="block" *ngFor="let item of items">
<div class="inblock">
<p class="title">{{ item.name }}:</p>
</div>
</div>
</div>
Everything is working fine but if one of the div height was higher than the others it would look something like the image below
I want to have a nice row with three divs only and after three you start a new block, I know how to do it normally but I can't figure out how to do it with Angular 2!
UPDATE : I don't want a fixed height because the content can be as long as the user wants! so adding a fixed height with CSS will not solve the issue
You will find a solution using css. Take this code:
.block {
float: left;
width: 150px;
margin: 10px;
border: 3px solid #73AD21;
}
.block:nth-child(3n+4){
border: 1px solid red;
clear: both;
}
The above code is using float to make the blocks inline. Using nth-child you can tell it to clear each 3rd block.
Why don't you create a 'css' associated to your template and pass it to styleUrls property. In that CSS you can defile a class and set the div properties whatever you like and pass that class name to the elements.
Expectation: Simple 4 line menu, on hover - all divs except the one hovered over with class .snav should lower css font-size to 5px
**** OK PEOPLE - Yeah i know there is a CSS ONLY solution and I know other approaches for resolution -- let me clarify, I was just playing with Jquery selectors and methods, and the Jquery selector I commented out was EXPECTED to work as i listed above, it didn't so i changed it. my question was seeking an explanation for why that commented out selector FAILED ****
In looking at the structure and Jquery below, I expected both Jquery selector versions of the .mouseover to perform the same way, however the one commented out does not perform as expected. instead: It applies the font-size change to all .snav classes and does not exclude the (this) object as expected. I'm looking for someone to explain to me why one selector works but the other does not perform the same way.
//$('.snav').mouseover(function() {
// $('.snav:not(this)').css("font-size","5px");
//});
$('.snav').mouseover(function() {
$('.snav').not($(this)).css("font-size","5px");
});
$('.snav').mouseout(function(){
$('.snav').css("font-size","15px");
});
.snav {font-size:15px; height:30px; line-height:30px;cursor:pointer;width:120px; border:thin solid black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
<div id="nav1" class="snav">HOME</div>
<div id="nav2" class="snav">PAGE 1</div>
<div id="nav3" class="snav">PAGE 2</div>
<div id="nav4" class="snav">PAGE 3</div>
</div>
Your issue is because you're using this as a string in the :not() selector, whereas you need to use the this keyword instead, to reference the element itself:
$('.snav').mouseover(function() {
$('.snav').not(this).css("font-size", "5px");
});
That said, there's no need for Javascript here, you can achieve this in CSS alone:
.snav {
font-size: 15px;
height: 30px;
line-height: 30px;
cursor: pointer;
width: 120px;
border: thin solid black;
}
#menu:hover .snav {
font-size: 5px;
}
#menu .snav:hover {
font-size: 15px;
}
<div id="menu">
<div id="nav1" class="snav">HOME</div>
<div id="nav2" class="snav">PAGE 1</div>
<div id="nav3" class="snav">PAGE 2</div>
<div id="nav4" class="snav">PAGE 3</div>
</div>
You've got this embedded in the string; it won't (and can't) be evaluated as this as it exists in the function. Try
$('.snav').mouseover(function() {$('.snav').not(this).css("font-size","5px"); });
Inside jQuery/Sizzle or the browser's native querySelectorAll(), that string "this" is just the letters t h i s. That code has no way of knowing the value of this in your function. You simply cannot create a selector string that involves a DOM element reference directly.
You can't use this in a selector string.
The this keyword exists in JavaScript and references the current context where the code is running. There is no this keyword for CSS selectors, it doesn't know about the JavaScript context.
I have the following problem:
When the text I wrote is to long for the DIV, it breaks at unpleasant places, how do I set it at where to break?
Long text: Test: Hello My Name Is Tim4497
But it breaks after "Test:" so it looks like below:
Test:
Hello My Name Is Ti
Do you know how to make it look like:
Test: Hello My Name
is Tim4497.
after the line break, it has to line up after "Test:"
Also, if it breaks into multiple lines, the line spaces must be the same.
So far this is what I have but doesn't do what I wanted.
HTML-Code:
<div>
<span class="user_name" style="color:#FF7000">Test</span>
": "
<span class="user_message">Hello my name ist Tim and my english is terrible.</span>
</div>
How to solve this problem with JS or Html/CSS?
Thank you :),
tim4497
There are many ways to do it... Perhaps one of the cleanest would be through css table and table-cell. This will place your elements side-by-side perfectly.
Make your wrapper div a display: table and your spans display: table-cell. (don't forget to put your ":" inside a span too, for better visual)
<div class="wrapper">
<span class="user_name" style="color:#FF7000">Test</span>
<span>:</span>
<span class="user_message">Hello my name ist Tim and my english is terrible.</span>
</div>
CSS:
.wrapper {
display: table;
}
.wrapper span {
display: table-cell;
}
http://jsfiddle.net/jy7d431p/1/ - Resize the screen and see, or set a width to the last span...
You can use floated DIV's to achieve something like this effect:
<div style="width: 200px; background: blue;">
<div style="float:left; background: red;">Name:</div>
<div style="float:left; text-align: justify; background: green; width: 100px;">Some extremely long text would go in here that should wrap around several times and be flush with the first and last charcters.</div>
<div style="clear: both;"></div>
</div>
Floating can be a complicated topic if you don't know much about it, though. See All About Floats from css-tricks.com.
http://jsfiddle.net/eezpzj0L/
I have never coded before so i dont know much, i watched this youtube video on how to make a js button youtube video
<div style="position:absolute; margin-left:1202px;"
<input type="image" src="images/login.png"
onmouseover="javascript:this.src='images/loginpressed.png';"
onmouseout="javascript:this.src='images/login.png';" />
</div>
i can see that the code works in dreamweaver, but for somereason, others cannot see it on the website
You forgot a > after <div style="position:absolute; margin-left:1202px;". Because of that, the button is now part of your div's declaration.
B.t.w. You can achieve a similar result by using another element than input type=image, like a span or div or an actual link element (a href) and apply some CSS to give it a different background image. For instance:
HTML:
<span class="button" onclick="alert('clicked');">Caption</span>
CSS:
.button {
display: inline-block;
height: 30px;
background-image: url(normalstate.png);
}
.button:hover {
background-image: url(hoverstate.png);
}
It may possible that path to your images not found at other place.