I am working with some sort of E-Shop Template and I can only manipulate some stuff with Jquery and JS.
Problem No 1:
I want to give the first box with the Content "Hello and Welcome!" and some background-Image. Problem is, that this box has some padding and I need to set the Background to the parent "inner-Wrapper" of this Div.
Is there a way to select the first "inner-wrapper" and check if the Content is "hello and welcome!" in the Content-box?
Problem No 2:
Box 1 - Box 4 Need another Background-Image.
I know some basic Jquery stuff but I struggle with those advanced stuff. And after 4 hours of trial and error I have to ask you guys.
I hope you can help me, and thanks in advance!
<div class="row">
<div class="inner-wrapper">
<div class="content-box">
Hello and Welcome!
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
<img src="" alt="">
</div>
</div>
</div>
<div class="row">
<div class="inner-wrapper">
<div class="content-box">
Box 1
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 2
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 3
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 4
</div>
</div>
</div>
Instead of checking the text you can add an extra class and check for that class Or you can give a seperate background image for the $('.content-box') inside the first .inner-wrapper
$(function(){
$('.content-box').each(function(){
if($(this).hasClass('firstBox')){
$(this).parent().css('background-image', 'url(http://via.placeholder.com/350x150)');
}else{
$(this).parent().css('background-image', 'url(http://via.placeholder.com/150x150)');
}
})
})
.inner-wrapper{
width:100px;
height:100px;
background-size: cover;
border:1px solid #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="inner-wrapper">
<div class="content-box firstBox">
Hello and Welcome!
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
<img src="" alt="">
</div>
</div>
</div>
<div class="row">
<div class="inner-wrapper">
<div class="content-box">
Box 1
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 2
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 3
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 4
</div>
</div>
</div>
Related
I am trying to render the react code on the server side. The code is being built and then rendered on the browser. But the classes that need to be added in the react code is being omitted. Can anyone please help me with what exactly is happening here.
This is how the code should appear but the classes are changed when the code is rendered
<div class="events-s">
<div class="content-w">
<div class="content">
<h1 class="event-section">Events</h1>
<div class="feature-events">
<h2 class="pb-block">Featured Events</h2>
</div>
</div>
</div>
<div class="content-w">
<div class="content">
<div class="pb-b">
<div class="pb-b"></div>
<h2 class="pb-block-t">Where We'll Be Next</h2>
</div>
</div>
</div>
<div class="content-w">
<div class="content">
<div class="pb-b">
<h2 class="pb-block-t">Past Events</h2>
</div>
</div>
</div>
</div>
how the code is actually rendered :
**<div class="main-content">**
<div class="content-w">
<div class="content">
<h1 class="event-section">Events</h1>
<div class="feature-events">
<h2 class="pb-block">Featured Events</h2>
</div>
</div>
</div>
<div class="content-w">
<div class="content">
<div class="pb-b">
<div class="pb-b"></div>
<h2 class="pb-block-t">Where We'll Be Next</h2>
</div>
</div>
</div>
<div class="content-w">
<div class="content">
<div class="pb-b">
<h2 class="pb-block-t">Past Events</h2>
</div>
</div>
</div>
</div>
This was solved .. i was not using the correct relative url to fetch the page
so the contents were not loaded correctly
I have created 3 cards with 2 widgets in the sidebar. To make it responsive I have used bootstrap 4 column ordering.
Now the issue I'm facing is if I have 2 columns in one row and the right column is larger than the left column it shows space in-between card 1 and card 2 because card 1 is smaller than widget 1 or 2.
Can anyone help me how can I remove this gap?
Codeply link for better responsive viewing:
https://www.codeply.com/go/8cNp9dUyE5
My code preview is below:
.left-panel {
background: gray;
}
.box1,
.box2,
.box3 {
background: white;
height: 50px;
border: 1px solid red;
margin-bottom: 20px;
}
.right-sidebar, .bg-pink {
background: pink;
}
<div class="container">
<div class="row">
<div class="col-12 bg-pink">
<div class="row d-md-block">
<div class="left-panel col-md-8 order-0 float-left">
<div class="box1 mt-2"><p>Box 1</p></div>
</div>
<div class="right-sidebar col-md-4 order-3 float-left">Widget 1</div>
<div class="right-sidebar col-md-4 order-1 float-left">
<p>Widget 2</p><p>Continue Widget 2</p><p>Widget 2 About to End</p><p>Widget 2 Ends</p>
</div>
<div class="left-panel col-md-8 order-3 float-left">
<div class="box2 mt-2 ">Box 2</div>
</div>
<div class="left-panel col-md-8 order-5 float-left">
<div class="box3 mt-2">Box 3</div>
</div>
</div>
</div>
</div>
</div>
Real-life example: https://prnt.sc/ouscan
enter image description here
It's not totally clear to me what you are trying to do here, but simplifying your classes will remove the gap:
<div class="container">
<div class="row">
<div class="left-panel col-md-8">
<div class="box1 mt-2"><p>Box 1</p></div>
<div class="box2 mt-2">Box 2</div>
<div class="box3 mt-2">Box 3</div>
</div>
<div class="right-sidebar col-md-4">
<p>Widget 1</p><p>Widget 2</p><p>Continue Widget 2</p><p>Widget 2 About to End</p><p>Widget 2 Ends</p>
</div>
</div>
</div>
You can re-introduce the ordering classes if needed, but this will at least remove the gap. Depending on what the contents of the boxes and the widgets are, you may want to include rows within the two columns also.
Edit
If you were to create a re-usable component that represents your right side bar this would be a bit cleaner, but here is an option:
<div class="container">
<div class="row">
<div class="left-panel col-md-8">
<div class="box1 mt-2"><p>Box 1</p></div>
<div class="right-sidebar d-md-none">
<p>Widget 1</p><p>Widget 2</p><p>Continue Widget 2</p><p>Widget 2 About to End</p><p>Widget 2 Ends</p>
</div>
<div class="box2 mt-2">Box 2</div>
<div class="box3 mt-2">Box 3</div>
</div>
<div class="right-sidebar d-sm-none d-md-block col-md-4">
<p>Widget 1</p><p>Widget 2</p><p>Continue Widget 2</p><p>Widget 2 About to End</p><p>Widget 2 Ends</p>
</div>
</div>
</div>
To achieve this you might want to simplify your html and wrap your elements sort of like this:
<div class="container">
<div class="row">
<div class="col-md-8">
BOXES GO HERE
</div>
<div class="col-md-4">
SIDEBAR GOES HERE
</div>
</div>
</div>
The floats are battling what the bootstrap grid does automatically.
NEW This might be more what you are looking for using row-eq-height:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row row-eq-height" style="background-color: blue;">
<div class="col-md-8">
<div class="box1 mt-2">
<p>Box 1</p>
</div>
</div>
<div class="col-md-4">
<p>Widget 1</p>
</div>
</div>
<div class="row row-eq-height" style="background-color: red;">
<div class="col-md-8">
<div class="box1 mt-2">
<p>Box 2</p>
</div>
</div>
<div class="col-md-4">
<p>Widget 2</p>
<p>Continue Widget 2</p>
<p>Widget 2 About to End</p>
<p>Widget 2 Ends</p>
</div>
</div>
<div class="row row-eq-height" style="background-color: yellow;">
<div class="col-md-8">
<div class="box1 mt-2">
<p>Box 3</p>
</div>
</div>
<div class="col-md-4">
<p>Widget 3</p>
</div>
</div>
</div>
This question already has answers here:
jQuery find an element by its index
(7 answers)
Closed 4 years ago.
I was wondering how I could add a class to a specific object inside a list?
Let me demonstrate the question with some code.
$('.box')[5].addClass('center')
.center{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box">
c-1
</div>
<div class="box">
c-2
</div>
<div class="box">
c-3
</div>
<div class="box">
c-4
</div>
<div class="box">
c-5
</div>
<div class="box">
c-6
</div>
<div class="box">
c-7
</div>
<div class="box">
c-8
</div>
<div class="box">
c-9
</div>
</div>
This does not work because I get an error:
Uncaught TypeError: $(...)[5].addClass is not a function
I only want to add the class to the fifth element of the list. What can I do?
$('.box') is an object not an array. So you can not use index like that.
You can simply use eq() selector which selects the element at the specified index within the matched set:
$('.box:eq(5)').addClass('center');
.center{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box">
c-1
</div>
<div class="box">
c-2
</div>
<div class="box">
c-3
</div>
<div class="box">
c-4
</div>
<div class="box">
c-5
</div>
<div class="box">
c-6
</div>
<div class="box">
c-7
</div>
<div class="box">
c-8
</div>
<div class="box">
c-9
</div>
</div>
In JQuery there is something called the eq selector
Select the element at index n within the matched set.
Here is how to use it in your instance (remember counting starts at 0)
$('.box:eq( 5 )').addClass('center')
.center {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box">
c-1
</div>
<div class="box">
c-2
</div>
<div class="box">
c-3
</div>
<div class="box">
c-4
</div>
<div class="box">
c-5
</div>
<div class="box">
c-6
</div>
<div class="box">
c-7
</div>
<div class="box">
c-8
</div>
<div class="box">
c-9
</div>
</div>
I hope you find this helpful.
I have a 3 column div with multiple rows. What is the most dynamic way to extract content from the first div and append/prepend this to the 3rd div - Ensuring that all following divs follow along.
here is my example code:
<div class="content">
<div class="item">
<div class="col1">
<div class="img1">
<img src="img_in_first_col">
</div>
</div>
<div class="col2"></div>
<div class="col3">
<div class="img2">
<img src="img_in_third_col">
</div>
</div>
</div>
<div class="item">
<div class="col1">
<div class="img1">
<img src="img_in_first_col">
</div>
</div>
<div class="col2"></div>
<div class="col3">
<div class="img2">
<img src="img_in_third_col">
</div>
</div>
</div>
<div class="item">
<div class="col1">
<div class="img1">
<img src="img_in_first_col">
</div>
</div>
<div class="col2"></div>
<div class="col3">
<div class="img2">
<img src="img_in_third_col">
</div>
</div>
</div>
</div>
I've tried using something along the lines of:
$('.item .col1 .img1').each(function(){
$(this).prependTo('.item .col3 .img2')
})
but what i get is all the images being added to all the rows.
Please help! thanks in advance
Should be as simple as this:
$(".col1").each(function (index, element) {
$(this).closest(".col3").prepend($(this).contents());
});
You could use this to insert column 1 after column 3:
$('.col1').each(function(){
$(this).insertAfter($(this).siblings('.col3'));
});
... or before column 3:
$('.col1').each(function(){
$(this).insertBefore($(this).siblings('.col3'));
});
Used jQuery functions:
insertAfter
insertBefore
siblings
Hi Apparently my toggle function does not work. I need to Hide a div "photography" when clicking the word "photography" that is located in another div. Please see my code below
HTML:
<div class="bar">
<div="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
Photography
Graphics
</div>
</div>
</div>
</div>
<section id="photograhpy" class="photograhpy">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<hr class="small">
<div class="row">
<div class="col-md-6">
<div class="photograhpy-item">
<a href="#">
<img class="img-photograhpy img-responsive" src="imgs/pics/car1.jpg">
</a>
</div>
</div>
JS:
$(document).ready(function(){
$("#hideshow").click(function(){
$("#photography").toggle(1000);
});
});
Looks like a spelling error:
<section id="photograhpy" class="photograhpy">
Should be:
<section id="photography" class="photography">
There is nothing else outstandingly wrong with your code.
Also, you may not reference elements with the same id exclusively via JavaScript. It is poor practice to give multiple elements the same id.