I have two lines of html code that already output by php
<div class="product-info weight">Weight: 10 kg</div>
<div class="product-info dimensions">Dimensions: 10 cm × 10 cm × 10 cm</div>
And i want to insert a div as a container to above two line so i can add some css to the container.
<div class="product-info-container">
<div class="product-info weight">Weight: 10 kg</div>
<div class="product-info dimensions">Dimensions: 10 cm × 10 cm × 10 cm</div>
</div>
is it possible to achieve by jquery? And how to do that?
You can use .wrapAll()
$('.product-info').wrapAll('<div class="product-info-container"></div>')
Demo: Fiddle
$(".product-info.weight, .product-info.dimensions").wrapAll( "<div class='product-info-container'></div>" );
Related
I am new to coding and programming and I have been following, on Youtube, a screen recording of a programmer making a responsive thumbnail slider using HTML, CSS, and Javascript. I've gotten to a point where I am trying to check if my Javascript was logged into the console, but I continue to get this error message: "script.js:3 Uncaught TypeError: Cannot read property 'children' of null at script.js:3" Commenting line 3 solves the problem but then the same error shows for line 4: "script.js:3 Uncaught TypeError: Cannot read property 'offsetWidth' null at script.js:4"
Can someone tell me why this is happening? My code is below.
const container=document.querySelector(".thumbnail-container");
const allBox=container.children;
const containerWidth=container.offsetWidth;
const margin=30;
var item=0;
// item setup per slide
responsive=[
{breakPoint:{width:0,item:1}}, //if width greater than 0 (1 will item show)
{breakPoint:{width:600,item:2}}, //if width greater than 600 (2 will item show)
{breakPoint:{width:1000,item:4}} //if width greater than 1000 (4 will item show)
]
function load(){
for(let i=0; i<responsive.length;i++){
if(window.innerWidth>responsive[i].breakPoint.width){
items=responsive[i].breakPoint.item
}
}
start();
}
function start(){
for(let i=0;i<allBox.length;i++){
//width and margin setup of items
//allBox[i].style.width=containerWidth/items;
console.log(allBox[i])
}
}
window.onload=load();
<div class="thumbnailslider">
<div class="thumbnailcontainer">
<div class="artitem">
1
</div>
<div class="artitem">
2
</div>
<div class="artitem">
3
</div>
<div class="artitem">
4
</div>
<div class="artitem">
5
</div>
<div class="artitem">
6
</div>
<div class="artitem">
7
</div>
<div class="artitem">
8
</div>
</div>
<!-- Control Slides -->
<div class="artcontrols">
</div>
</div>
<script src="script.js"></script>
Please change this line you have misspelled thumbnailcontainer to thumbnail-container
const container=document.querySelector(".thumbnailcontainer");
I have 30 divs with different images and links and wanted to get them to be displayed in 10 different divs randomly.
Example: http://imgur.com/Ar1gdzL (it's an animated gif)
Something like a "random related posts" that we use in wordpress, but my page is not in wordpress. It's just a simple website in php.
the div would be so
Link
Link
Link
etc
etc
etc
How to do this in javascript or php?
Create 10 divs with those positions (empty divs)
Create a string array with the 10 (or more) html content that will fill the divs
Shuffle the array as stated here
Pass by the array and modify the innerHtml of the 10 divs one by one (Only first 10 elements since only 10 divs)
You can use different ways, depending on your needs. When using MySQL you can use a query like:
SELECT images, link FROM tablename WHERE ...... ORDER BY RAND()
Or you can use shuffle on an array.
$array = array ( 'image1', 'image2' );
shuffle ( $array );
// Display divs
<div class="divPool">content 1</div>
<div class="divPool">content 2</div>
<div class="divPool">content 3</div>
etc... to 30 divs
<div class="destination">destination 1</div>
<div class="destination">destination 2</div>
<div class="destination">destination 3</div>
etc. to 10 divs,
then in JavaScript:
//make arrays of the html elements in each class:
var arrayOfContent=document.getElementsByClassName("divPool");
var arrayOfDestinations=document.getElementsByClassName("destination");
for (var i=0; i<10: i++){//for each of the 10 destination divs
//select a random number from 0 to 29
var random=Math.floor(Math.random() * 30);
arrayOfDestinations[i].innerHTML=arrayOfContent[random].innerHTML
}
Also, in css you can make the divPool class invisible like this:
.divPool{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
for(i=1;i<=10;i++){
var id = Math.floor(Math.random() * 30) + 1;
$("#display_"+id).show();
}
});
</script>
<div id="display_1" style="display:none;">1</div>
<div id="display_2" style="display:none;">2</div>
<div id="display_3" style="display:none;">3</div>
<div id="display_4" style="display:none;">4</div>
<div id="display_5" style="display:none;">5</div>
<div id="display_6" style="display:none;">6</div>
<div id="display_7" style="display:none;">7</div>
<div id="display_8" style="display:none;">8</div>
<div id="display_9" style="display:none;">9</div>
<div id="display_10" style="display:none;">10</div>
<div id="display_11" style="display:none;">11</div>
<div id="display_12" style="display:none;">12</div>
<div id="display_13" style="display:none;">13</div>
<div id="display_14" style="display:none;">14</div>
<div id="display_15" style="display:none;">15</div>
<div id="display_16" style="display:none;">16</div>
<div id="display_17" style="display:none;">17</div>
<div id="display_18" style="display:none;">18</div>
<div id="display_19" style="display:none;">19</div>
<div id="display_20" style="display:none;">20</div>
<div id="display_21" style="display:none;">21</div>
<div id="display_22" style="display:none;">22</div>
<div id="display_23" style="display:none;">23</div>
<div id="display_24" style="display:none;">24</div>
<div id="display_25" style="display:none;">25</div>
<div id="display_26" style="display:none;">26</div>
<div id="display_27" style="display:none;">27</div>
<div id="display_28" style="display:none;">28</div>
<div id="display_29" style="display:none;">29</div>
<div id="display_30" style="display:none;">30</div>
`
I am trying to get jquery to close a div and inset an opening div with a class after x amount of items.
Here is what I have tried:
$(this).after('</div> <div class=\"bar">Bar');
it outputs:
<div class="bar">Bar</div>
What I need is:
<div class="item2">
<div class="CountThese2"> Count Me </div>
<div class="CountThese2"> Count Me </div>
</div>
<div class="bar">
<div class="CountThese2"> Count Me </div>
<div class="CountThese2"> Count Me </div>
</div>
<div class="bar">
<div class="CountThese2"> Count Me </div>
<div class="CountThese2"> Count Me </div>
</div>
<div class="bar">
<div class="CountThese2"> Count Me </div>
<div class="CountThese2"> Count Me </div>
</div>
http://jsfiddle.net/yoderman94/JEtj2/
You can't add half a tag. I think what you're trying to do is wrap the elements. Your fiddle is pretty messy, but here's a simple example of how you can do that:
http://jsfiddle.net/9Q62H/
while($('#wrapper > a:lt(2)').wrapAll('<div class="bar">bar</div>').length) { }
Which turns this:
<div id="wrapper">
1
1
1
1
1
1
1
1
</div>
into this:
<div id="wrapper">
<div class="bar">bar
1
1
</div>
<div class="bar">bar
1
1
</div>
<div class="bar">bar
1
1
</div>
<div class="bar">bar
1
1
</div>
</div>
You can't manipulate the DOM that way, with or without jQuery. To accomplish the same thing, insert a new div after the current div's parent, and then move all of the current div's following siblings to the new div:
var bar = $("<div>").addClass("bar").text("Bar");
bar.insertAfter($(this).parent());
bar.append($(this).nextAll());
Edit: To preserve text nodes, including the whitespace between your links, it's not quite as simple as $(this).nextAll(), sadly. You need to use .contents() to select the text nodes, then slice at the index of this:
var contents = $(this).parent().contents();
var bar = $("<div>").addClass("bar").text("Bar");
bar.insertAfter($(this).parent());
bar.append(contents.slice(contents.index(this) + 1));
http://jsfiddle.net/JEtj2/6/
I'm going to recommend a different approach here. When you call .after() you need to be giving it a complete open and close tag. You cannot open a tag then close it later like you are trying to above.
My advice would be to try and take an approach like the following, so you can pass a complete open and close tag to .after()
var theDiv = "<div class='bar'>";
for(var i = 0; i < 2; i++) {
theDiv += '<div class="CountThese2"> Count Me </div>';
}
theDiv += "</div>";
$('#thing').after(theDiv);
See how I constructed the whole div including contents before calling .after() ?
I am doing tests with fluentlenium to my application, but some errors are happening. I ‘m using Play Framework and Slickgrid to create my grid. Slickgrid create the grid dynamically in javascript.
The structure that is created seems like this:
<div id=”grid”>
<div class=”header”>
<div class=”slickgrid-column-header column-1”>Column 1 </div>
<div class=”slickgrid-column-header column-2”>Column 2 </div>
<div class=”slickgrid-column-header column-2”>Column 2 </div>
</div>
<div class=”viewport”>
<div class=”canvas”>
<div class=”slick-row row-1”>
<div class=”slick-cell l0 r0> Column 1 Row 1</div>
<div class=”slick-cell l1 r1> Column 2 Row 1</div>
<div class=”slick-cell l2 r2> Column 3 Row 1</div>
</div>
<div class=”slick-row row-2”>
<div class=”slick-cell l0 r0> Column 1 Row 2</div>
<div class=”slick-cell l1 r1> Column 2 Row 2</div>
<div class=”slick-cell l2 r2> Column 3 Row 2</div>
</div>
</div>
</div>
</div>
Normally, when you see your source code with fluentlenium, you can see all source code, but in my case, some slickgrid code lines are missing. And this missing lines are the lines that I need.
This code creates a simple test that get the page source.
#Test
public final void fakeTest() {
final int port = 3333;
running(testServer(port, fakeApplication()), HTMLUNIT,
new Callback<TestBrowser>() {
#Override
public void invoke(final TestBrowser browser) throws Throwable {
browser.goTo("http://localhost:3333/fake");
System.out.println(browser.pageSource());
}
});
}
The output seems like this:
<html>
<head> <title> </title> </head>
<body>
<div id=”grid>
<div class=”header”>
<div class=”slickgrid-column-header column-1”>Column 1 </div>
<div class=”slickgrid-column-header column-2”>Column 2 </div>
<div class=”slickgrid-column-header column-2”>Column 2 </div>
</div>
<div class=”viewport”>
<div class=”canvas”></div>
</div>
</div>
</body>
</html>
How you can see, the cells didn’t appear and I can’t get the cell FluentWebElement to simulate clicks or get the cell value.
You have the comportement you have write :
go to the page
print the source immediatly
What's happend there : the Slickgrid stuff is not generated yet. If you want so, you have to wait.
So use the await api with something like between the goTo(page) and :
await().atMost(5, TimeUnit.SECONDS).until(".slick-row").isPresent()
or anything you think more appropriate. There it will wait at most 5 seconds until a element with the class slick-row has been found.
I am trying to equalize "row" hights of a project I am working on and am running into speed issues. I have 60 to 90 rows and 4 to 10 columns. This whole setup cannot be generated in a real table due to other requirements so I have been using the jQuery.equalhights plugin, which works great, but when you get to 240 "cells" it takes about 5 seconds to finish on IE7 & 8 (FF and other modern browsers are fast)
So is there a faster way to do this then looping though every div in the row and recording the tallest then setting the hight on all the divs to the tallest hight?
Example HTML. I need all *row-# divs to be equal height to the all other *row-#.
So the height of label-row-0 = item-1-row0 = item-2-row-0 = item-3-row-0 = item-4-row-0 and the max height in this happens to be item-2-row-0
<div style="float: left">
<div id="label-row-0">label</div>
<div id="label-row-1">label</div>
<div id="label-row-2">label</div>
<div id="label-row-3">label</div>
</div>
<ul style="margin: 0; padding: 0; list-style: none; float: left;">
<li>
<div id="item-1-row-0">bla</div>
<div id="item-1-row-1">bla<br/>bla</div>
<div id="item-1-row-2">bla<br/>bla</div>
<div id="item-1-row-3">bla<br/>blabla<br/>blabla<br/>bla</div>
</li>
<li>
<div id="item-2-row-0">bla<br/>blabla<br/>bla</div>
<div id="item-2-row-1">bla</div>
<div id="item-2-row-2">bla bla bla</div>
<div id="item-2-row-3">bla<br/>bla</div>
</li>
<li>
<div id="item-3-row-0">bla</div>
<div id="item-3-row-1">bla</div>
<div id="item-3-row-2">bla</div>
<div id="item-3-row-3">bla</div>
</li>
<li>
<div id="item-4-row-0">blabl;a bhdks</div>
<div id="item-4-row-1">fvhsdjk vbhsdivbsibn ikvjchwib</div>
<div id="item-4-row-2">gfwei bcvieufhci bwuued</div>
<div id="item-4-row-3">fgbuisdk bnib cieuh9b</div>
</li>
</ul>
The li elements are sortable via jQuery UI and need to be allowed to horizontally scroll while keeping the label div fixed in-place. I am basically building a column centric table that has a locked column and locked header and it needs to be column sortable, which I have found no way to do with a regular table or existing jQuery plugins
Check http://www.ejeliot.com/blog/61
As I can only supply 1 link per post, here is another link: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks.