How can I rotate a circle with items inside it? - html

I have been trying to rotate a circle with the items inside of it using a button, when I change the rotate value of the circle directly in css it works fine but there appears to be a problem in the html code.
html code:
<html>
<head>
<title>web desgin test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<nav>
<div class="logo">
<img
src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/logo.png"
alt="">
</div>
<div class="links">
<ul>
<li>Home</li>
<li>Phone</li>
<li>Accessories</li>
<li>Cart</li>
</ul>
</div>
</nav>
<div class="information">
<img
src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/mobile.png"
class="mobile">
<div id="circle">
<div class="feature one">
<img
src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/camera.png"
alt="">
<div>
<h1>Camera</h1>
<p>108MP Main camera</p>
</div>
</div>
<div class="feature two">
<img src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/processor.png" alt="">
<div>
<h1>processor</h1>
<p>Exynos 990</p>
</div>
</div>
<div class="feature three">
<img src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/display.png" alt="">
<div>
<h1>Display</h1>
<p>6.9 inch, 1440px</p>
</div>
</div>
<div class="feature four">
<img src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/battery.png" alt="">
<div>
<h1>Battery</h1>
<p>4500 mA</p>
</div>
</div>
</div>
</div>
<div class="controls">
<img src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/arrow.png" id="upBtn">
<h3>Features</h3>
<img src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/arrow.png" id="downBtn">
</div>
</div>
<script>
var circle = document.getElementById('circle');
var upBtn = document.getElementById('upBtn');
var downBtn = document.getElementById('downBtn');
var rotateValue = circle.style.transform();
var rotateSum;
upBtn.onclick = function() {
rotateSum = rotateValue + "rotate(-90deg)";
circle.style.transform = rotateSum;
rotateValue = rotateSum;
}
</script>
css code:
enter code here
#circle {
width: 1000px;
height: 1000px;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
transform: rotate(0deg);
.controls {
position: absolute;
right: 10%;
top: 50%;`enter code here`
transform: translateY(-50%);
text-align: center;
}
.controls h3 {
margin: 15px 0;
color: #fff;
}
#upBtn {
width: 15px;
cursor: pointer;
}
#downBtn {
width: 15px;
cursor: pointer;
transform: rotate(180deg);
}
................................................................................


Your variable declarations are wrong if for example the id is #circle
document.getElementById(circle); --> document.getElementById('circle');
It is better when you post all html according to this function


There is no circle in your html code...
So when you do this :
var circle = document.getElementById(circle);
var circle is null, because there is not a html element where its id is circle, and you are trying to take one called like that
Also, when you do this:
document.getElementById(circle);
is going to look for a string in every id, so it should be :
document.getElementById('circle');
edit:
for been clear, when you use selector, you are looking for a matching string, when you do this:
var circle = document.getElementById(circle);
var upBtn = document.getElementById(upBtn);
var downBtn = document.getElementById(downBtn);
It should be this:
var circle = document.getElementById('circle');
var upBtn = document.getElementById('upBtn');
var downBtn = document.getElementById('downBtn');
In the firt one you are sayin look for a string with the value os circle
var circle = 'notCircle'
var circle = document.getElementById(circle);
console.log(circle)
In the second you are looking direclty for x string on html ids

Related

How to use an unordered list to display labeled inputs with customized checkboxes using only CSS and HTML?

I want to make a hidden context menu to display multiple genre selections. I want to customize the input checkboxes so that it looks like this:
this image is my required finished layout
It works fine without the label elements in the unordered list elements, however I need the label to toggle the checkbox. This is my current (incorrect) layout:
this image is what I have achieved so far
I have tried many things, including setting:
position: relative/absolute
display: flexbox/inline-block
widths and heights
How do I use an unordered list to display labeled inputs with customized checkboxes using only CSS and HTML?
<div class="col-md-12 col-lg-4 text-lg-right mt-md-4 mt-lg-0">
<div class="d-flex-column w-100" id="genre-bar">
<!-- always visible selections bar -->
<div class="row">
<div class="col-12 mb-3 d-flex text-align-right">
<span class="w-100 genre-bar-display text-align-right align-items-center"><i class="fas fa-chevron-down"></i></span>
</div>
</div>
<div class="genre-hidden-section px-3">
<!-- Multiple selector -->
<div class="row">
<div class="col-6 text-left">
<ul id="first-genre-list" class="genre-list">
<!-- This is populated by the #foreach below using JS -->
</ul>
</div>
<div class="col-6 text-left">
<ul id="second-genre-list" class="genre-list">
<!-- This is populated by the #foreach below using JS -->
</ul>
</div>
</div>
</div>
</div>
<!-- This div gets emptied and removed by JS immediately -->
<div id="select-close-books-genre" style="display:none;">
<ul>
#foreach (GenreModel genre in Model.Genres)
{
<li class="genre-checkbox-container">
<label>
#genre.Name
<span class="genre-checkmark"></span>
<input type="checkbox" value="#genre.Id">
</label>
</li>
}
</ul>
</div>
</div>
li input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.genre-checkmark {
display: inline-block;
top: 0;
left: 0;
height: 13px;
width: 13px;
border: 1px black solid;
border-radius: 3px;
background-color: white;
}
.genre-list {
display:flex;
flex-wrap:wrap;
}
.genre-checkbox-container {
flex-grow: 1;
}
.genre-checkbox-container:hover span {
background-color: #ccc;
}
.genre-checkbox-container input:checked ~ .genre-checkmark {
background-color: #30d9c8;
}
const genreListDiv = $("#select-close-books-genre")[0];
const genreList = Array.from(genreListDiv.firstElementChild.children);
genreListDiv.remove();
console.log(genreList)
for (let i = 0; i < genreList.length/2; i++) {
$('#first-genre-list')[0].appendChild(genreList[i]);
};
for (let i = Math.ceil(genreList.length/2); i < genreList.length; i++) {
$('#second-genre-list')[0].appendChild(genreList[i]);
};
// Open and close the genre selector box
$("#genre-bar").on('click', function(event) {
$("#genre-bar").addClass("genre-bar-open");
$('body').on('click', function () {
$('#genre-bar').removeClass("genre-bar-open");
});
$('#genre-bar').on('click', function (event) {
event.stopPropagation();
});
});

How can I sort ascending and descending div with numbers when clicked?

I have a certain markup with different data. I would like to sort a certain block by numbers. However, the code below, which is more or less suitable for me, does not work as expected. Now it just changes the order of the rows in reverse to the current one without taking into account the Price column. Unfortunately, I could not achieve more.
I will be grateful for any help here)
jQuery(function ($) {
$('#tsection').on('click', '.thead .price', function () {
var table = $('#tsection .tbody').eq(0);
var price = table.find('.list_item .price').text().replace(/[^0-9]/gi, '');
var rows = table.find('.list_item').toArray().sort(comparer($(price).index()))
price.asc = !price.asc
if (!price.asc) {
rows = rows.reverse()
}
for (var i = 0; i < rows.length; i++) {
table.append(rows[i])
}
})
function comparer(index) {
return function (a, b) {
var valA = getCellValue(a, index),
valB = getCellValue(b, index)
return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
}
}
function getCellValue(row, index) {
return $(row).children('.list_item').eq(index).text()
}
});
.thead div {
display: inline-block;
width: 100px;
padding: 10px;
border-bottom: 1px solid #333;
}
.thead .price:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f0dc";
margin-left: 2px;
}
.tbody .list_item div {
display: inline-block;
width: 100px;
padding: 10px;
}
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="tsection">
<div class="thead">
<div class="name">Name</div>
<div class="country">Country</div>
<div class="price">Price</div> <!-- asc/desc sorting by digit -->
<div class="time">Time</div>
</div>
<div class="tbody">
<div class="list_item">
<div class="name">Mark</div>
<div class="country">USA</div>
<div class="price">From 1 920 $</div> <!-- asc/desc sorting by digit -->
<div class="time">9 months</div>
</div>
<div class="list_item">
<div class="name">Piter</div>
<div class="country">Colombia</div>
<div class="price">2 220 $</div> <!-- asc/desc sorting by digit -->
<div class="time">2,5 months</div>
</div>
<div class="list_item">
<div class="name">Jacob</div>
<div class="country">Israel</div>
<div class="price">From 935 $</div> <!-- asc/desc sorting by digit -->
<div class="time">4,7 months</div>
</div>
</div>
</section>

CSS - How to have swiper slider arrows outside of slider that takes up 12 column row

I am using swiper slider and would like to have navigation arrows outside of the slider. What I would basically like to do is the same as it looks like on airbnb site, where slider with images takes up whole 12 column row, but arrows are outside of it.
I am using bootstrap twitter css framework and I have tried various things but nothing worked and don't know how to achieve this?
The css is this:
.swiper-container {
margin-top: 50px;
position: relative;
}
.arrow-left {
position: absolute;
top: 50%;
left: 0;
}
.arrow-right {
position: absolute;
top: 50%;
right: 0;
}
Html looks like this:
<div class="row swiper-container">
<div class="arrow-left">
<i class="ion-chevron-left"></i>
</div>
<div class="col-md-12 swiper-wrapper">
#foreach($videos as $video)
<div class="swiper-slide video-card">
<header class="card__thumb">
<img src="{{ $video->getThumbnail() }}"/>
</header>
<div class="card__body">
<div class="card__category">
</div>
<small>
{{ $video->created_at->diffForHumans() }}
</small>
<span class="video-title">
<p>
#if($video->title != '')
{{ $video->title }} <i class="ion-arrow-right-c"></i>
#else
Untitled
#endif
</p>
</span>
</div>
</div>
#endforeach
</div>
<div class="arrow-right">
<i class="ion-chevron-right"></i>
</div>
</div>
And this is the script:
var carousel = function carousel() {
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
nextButton: '.arrow-left',
prevButton: '.arrow-right',
slidesPerView: 4,
simulateTouch: false,
spaceBetween: 15,
breakpoints: {
1181: {
slidesPerView: 4
},
1180: {
slidesPerView: 3
},
1020: {
slidesPerView: 2
},
700: {
slidesPerView: 1
}
}
});
};
$(document).ready(function () {
carousel();
});

I just did this for one of my current projects.
You just have to change the location of the navigation HTML buttons and put them outside the swiper-container. For a better approach and behavior from the library, add a new class to them, and change the element in the JavaScript call.
Example:
<div class="swiper-container">
<div class="swiper-slides"></div>
</div>
<div class="swiper-button-prev-unique"></div>
<div class="swiper-button-next-unique"></div>
let carousel = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next-unique',
prevEl: '.swiper-button-prev-unique'
}
});
That worked perfect, and you can put your arrows outside the wrapper with ease with CSS.

For all my React folks out there:
import { Swiper as SwiperClass } from 'swiper/types';
import { Swiper, SwiperSlide } from 'swiper/react';
export const MySwiper = () => {
const [swiperRef, setSwiperRef] = useState<SwiperClass>();
const theSlides = useMemo(()=> ['slide one', 'slide two'], [])
const handlePrevious = useCallback(() => {
swiperRef?.slidePrev();
}, [swiperRef]);
const handleNext = useCallback(() => {
swiperRef?.slideNext();
}, [swiperRef]);
return (
<div>
<div>
<button onClick={handlePrevious }>
previous
</button>
</div>
<Swiper
onSwiper={setSwiperRef}
>
{theSlides.map((slide) => (<SwiperSlide key={slide}>{slide}</SwiperSlide>)
</Swiper>
<div>
<button onClick={handleNext}>
Next
</button>
</div>
</div>
);
};

If you using multiple swipers then you need to add different class names to swiper-cotainer and pagination arrows. And then create new Swiper and bind each arrows to local swiper.
let arr_next = $('.template-next') //your arrows class name
let arr_prev = $('.template-prev') //your arrows class name
$('.swiper-container--template').each(function (index, element) {
$(this).addClass('swiper' + index);
arr_next[index].classList.add('template-next' + index);
arr_prev[index].classList.add('template-prev' + index);
new Swiper('.swiper' + index, {
slidesPerView: 2,
navigation: {
nextEl: '.template-next'+index,
prevEl: '.template-prev'+index
},
slidesPerView: 2,
//spaceBetween: 100,
loop: true,
breakpoints: {
961: { slidesPerView: 2 },
740: { slidesPerView: 1 },
},
});
});
`

var swiper = new Swiper('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
slidesPerView: 3,
spaceBetween: 10,
autoplay: 3500,
autoplayDisableOnInteraction: false,
loop: true,
breakpoints: {
1024: {
slidesPerView: 3,
spaceBetween: 40
},
768: {
slidesPerView: 3,
spaceBetween: 30
},
640: {
slidesPerView: 2,
spaceBetween: 20
},
320: {
slidesPerView: 1,
spaceBetween: 10
}
}
});
.container{max-width: 600px;margin: 0 auto;}
.swiper_wrap{padding:0px 50px;height:100%;width: 100%;position: relative;display: block;text-align: left;}
.swiper-button-next{
margin-top: 0px;
position: absolute;
top: 50%;
right: -40px;
width: 45px;
height: 45px;
transform: translateY(-50%);
}
.swiper-button-prev{
position: absolute;
top: 50%;
left: -40px;
width: 45px;
height: 45px;
transform: translateY(-50%);
margin-top: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet"/>
<div class="container">
<div class="swiper_wrap">
<div class="slider-wrapper">
<div class="swiper-button-prev"></div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#">
<img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
</a>
</div><div class="swiper-slide">
<a href="#">
<img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
</a>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
<script src="http://www.jakse.si/test/jakse/taxi/js/swiper.min.js"></script>
This works for me, it is the same like older answer, but maybe it looks better :)

Put this below swiper block:
.section {
.swiper-button-prev {
left: -20px;
}
.swiper-button-next {
right: -20px;
}
}
<div class="section">
<div class="swiper">
<ul class="swiper-wrapper">
<li class="swiper-slide">
</li>
</ul>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

if anyone is interested I've found an easy work-around for this issue
position: fixed; will override the overflow:hidden; of the parent but it will make it appear relative to the root element, adding transform to the wrapper will make it relative again to the parent.
new Swiper(".my-swiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
}
});
.custom-swiper-wrapper {
transform: translate(0, 0);
.swiper-custom-nav {
position: fixed;
}
}
<div class="container custom-swiper-wrapper">
<div class="swiper my-swiper">
<div class="swiper-wrapper">
swiper items here
</div>
<div class="swiper-button-next swiper-custom-nav"></div>
<div class="swiper-button-prev swiper-custom-nav"></div>
</div>
</div>

This is a general solution. To move your arrows outside the container you'll need to first remove the arrow divs from .swiper-container.
Make another bigger container that has .swiper-container and your moved arrows. Give this bigger container position: relative as a reference to arrows that have position: absolute.
Make sure that the .swiper-container width is changed to a value smaller than 100% (e.g. 90% 95%) to avoid overlapping with the arrows.
If you like to keep the .swiper-container width same as that of the entire page width then give -ve margin to the bigger container.

This works if slidesPerView = 1:
.swiper-container {
padding-left: 50px;
padding-right: 50px;
}
.swiper-slide {
visibility: hidden;
}
.swiper-slide.swiper-slide-active {
visibility: visible;
}

In the wrapper function "carousel" we are using to initialize our Swiper instance we can use Swiper's native methods slideNext and slidePrev to add event listeners explicitly to ONLY children of a shared parent element.
1020: {
slidesPerView: 2
},
700: {
slidesPerView: 1
}
}
});
mySwiper.el.parentElement.querySelector(".arrow-left").addEventListener('click',
() => mySwiper.slideNext());
mySwiper.el.parentElement.querySelector(".arrow-right").addEventListener('click',
() => mySwiper.slidePrev());
};
For this to work fully, .swiper-container, .arrow-right and .arrow-left will need to share a wrapper. In Leff's case ".swiper-container" should work just fine:
<div class="row swiper-container">
<div class="arrow-left">
Because this approach allows us to isolate selected elements to a shared parent container, this can be safely used as part of a block of code that might appear more than once.

This is the basic example of how to achieve it. You were close. I slightly modified the code to make it visible within the snippet.
$(document).ready(function () {
var carousel = function carousel() {
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
nextButton: '.arrow-left',
prevButton: '.arrow-right',
slidesPerView: 4,
simulateTouch: false,
spaceBetween: 15,
breakpoints: {
1181: {
slidesPerView: 4
},
1180: {
slidesPerView: 3
},
1020: {
slidesPerView: 2
},
700: {
slidesPerView: 1
}
}
});
};
carousel();
});
.row.swiper-container {
margin-top: 50px;
position: relative;
width: 70%;
margin: 0 auto;
}
.arrow-left {
position: absolute;
background: gray;
top: 50%;
left: -40px;
width: 20px;
height: 20px;
transform: translateY(-50%);
}
.arrow-right {
position: absolute;
background: gray;
top: 50%;
right: -40px;
width: 20px;
height: 20px;
transform: translateY(-50%);
}
.swiper-wrapper {
margin: 0 auto;
height: 200px;
background: #f00;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.jquery.min.js"></script>
<div class="row swiper-container">
<div class="arrow-left">
<i class="ion-chevron-left"></i>
</div>
<div class="col-md-12 swiper-wrapper">
<div class="swiper-slide video-card">
<header class="card__thumb">
<img src="{{ $video->getThumbnail() }}"/>
</header>
<div class="card__body">
<div class="card__category">
</div>
<small>
</small>
<span class="video-title">
<p>
</p>
</span>
</div>
</div>
</div>
<div class="arrow-right">
<i class="ion-chevron-right"></i>
</div>
</div>

Ok, I had another method,
What the guys suggesting will not work with multiple sliders on page.
So, I added another two arrows, which will trigger the real arrows.
the swiper had:
{
navigation: {
nextEl: '.xnext',
prevEl: '.xprev',
}
}
$('.swiper-button-next').click(
function(e){
$(this).parents('.swiper-container').find('.xnext').trigger('click');
});
$('.swiper-button-prev').click(function(e){$(this).parents('.swiper-container').find('.xprev').trigger('click');});

The code below help to use more than one swiper, using one class. (At first I was used this in a php loop of swipers)
const swiperContainers = document.querySelectorAll('#swiper-global-container');
const swipers = document.querySelectorAll('#swiper-global-container .swiper');
swipers.forEach((swiper, index) => {
swiper.classList.add(`swiper-${index}`);
})
swiperContainers.forEach((container, index) => {
container.querySelector('.swiper-button-next').classList.add(`swiper-next-${index}`)
container.querySelector('.swiper-button-prev').classList.add(`swiper-prev-${index}`)
})
swipers.forEach((swiper, index) => {
new Swiper(`.swiper-${index}`, {
navigation: {
nextEl: `.swiper-next-${index}`,
prevEl: `.swiper-prev-${index}`,
},
});
});
html,
body {
margin: 0;
padding: 0;
}
main {
display: flex;
flex-direction: column;
min-width: 1300px;
}
#swiper-global-container {
flex: 1;
position: relative;
max-width: 1250px;
margin: 0 auto;
}
.swiper-slide {
max-height: 50vh;
}
.swiper {
max-width: 1200px;
margin: 0 auto;
}
.swiper-button-prev {
left: -50px !important;
}
.swiper-button-next {
right: -50px !important;
}
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<main>
<div id="swiper-global-container">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1652961735386-883c83e4d464?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670"
alt="">
</div>
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1572035563691-0944e6a816d5?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670"
alt="">
</div>
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1652697911040-52d0453522a6?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2574"
alt="">
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div id="swiper-global-container">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1652721684678-a147a957a03e?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2748"
alt="">
</div>
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1652898756182-04023f4135a1?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2664"
alt="">
</div>
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1652162539309-c96b2694f02b?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1655"
alt="">
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</main>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

I'm using react so I didn't want to go through the trouble of creating new event handlers for each of the toggles. I came up with a solution where you just add an extra div wrapper to the slide content and add padding:
html
<div class="row swiper-container">
<div class="arrow-left">
<i class="ion-chevron-left"></i>
</div>
<div class="col-md-12 swiper-wrapper">
#foreach($videos as $video)
<div class="swiper-slide video-card">
<div class="video-card-inner">
<header class="card__thumb">
<img src="{{ $video->getThumbnail() }}"/>
</header>
<div class="card__body">
<div class="card__category">
</div>
<small>
{{ $video->created_at->diffForHumans() }}
</small>
<span class="video-title">
<p>
#if($video->title != '')
{{ $video->title }} <i class="ion-arrow-right-c"></i>
#else
Untitled
#endif
</p>
</span>
</div>
</div>
</div>
#endforeach
</div>
<div class="arrow-right">
<i class="ion-chevron-right"></i>
</div>
</div>
css
.arrow-left {
left: 0;
}
.arrow-right {
right: 0;
}
.video-card {
padding: 0rem 2rem;
}
The padding within the slide will create a gap with the .video-card-inner element that will house all of your content, thus allowing the arrows to sit outside of your visible content. You can still achieve this with custom toggles, but it will also work with their default toggles.

Just stumbled upon this issue today, here's my attempt at solving it. Basically it only requires you wrapping .swiper-container inside additional .swiper-container-wrapper, as Swiper allows passing references to HTMLElement instead of selector string. And you also get to keep the class names, no discrete classes required for navigation elements or container.
At this point both navigation elements are placed inside .swiper-container-wrapper, as .swiper-container's siblings.
$('.swiper-container-wrapper').each(function (index, element) {
var swiperContainer = $(element).children('.swiper-container').get(0);
var nextEl = $(element).children('.swiper-button-next').get(0);
var prevEl = $(element).children('.swiper-button-prev').get(0);
new Swiper(swiperContainer, {
navigation: {
nextEl: nextEl,
prevEl: prevEl,
},
});
});

Removing Small White Space Under Footer

I've been searching around for a solution to the small sliver of white space which has appeared below my footer but nothing seems to work. I've tried manipulating margin-bottom and padding-bottom to no avail.
The website with the footer is located here: website
The footer in question has a class name of "footerWrapper" and i hope that using the browser DOM editor will give you a better picture of the situation then if i just posted incomplete code. I have tried for a long time to fix this and any suggestions are greatly appreciated.
EDIT: Added code below (I PHP 'included' alot of code, including my footer which created weird formatting. Could this be my problem?)
<body class="body1">
<div class="borderLine"></div>
<div class="banner"></div>
<div class="mainContent1">
<div class="header1">
<div class="headerContainer">
<div class="headerPanelOuter">
<div class="headerPanel">
<p class="panelWelcome">Welcome,
log in or sign up! </p>
<div class="panelButton" id="logInBut">
<span>log in</span>
</div>
<form name="LogOutForm" id="LogOutForm" method="post" action="/app/newstuff.php" style="z-index: 5;">
<div class="panelButton" style="top: 34px;" onclick="SubmitLogOutForm()">
<span>log out</span>
</div>
<input name="LogOutState" type="hidden" value="1">
</form>
<div class="panelButton" onclick="location.href='signup.php';" style="top: 64px;">
<span>sign up</span>
</div>
<div class="panelButton" onclick="location.href='useraccount.php';" style="left: 4px; width: 90px;">
<span>my account</span>
</div>
</div>
</div>
<img class="KELogo" src="/../../images/PRLogo(header).png" alt="Logo">
<img class="KETitleLogo" src="/../../images/KENameLogo(header32).png" alt="People\'s Robotics">
<div id="blackBackg" style="display: none;"></div>
<div id="LogInBox" style="display: none;">
<p id="logEscape" onclick="">x</p>
<p id="logInTitle">Log In</p>
<div id="linediv2"></div>
<form name="logInForm" id="logInForm" method="post" action="/app/newstuff.php" style="z-index: 5;">
<span id="emailField">E-mail:</span>
<br><input id="logEmail" type="text" style="height: 28px;" name="logEmail" value="" onfocus="inputFocus(this)" onblur="inputBlur(this)"> <br><br>
<span id="passField">Password:</span> <br>
<input id="logPass" type="password" style="height: 28px;" name="logPass" value="" onfocus="inputFocus(this)" onblur="inputBlur(this)"> <br><br>
<input id="logSubmit" type="submit" name="logSubmit" value="Log In">
</form>
</div>
<ul class="navList1">
<li><a id="B0" href="/app/newstuff.php" style="background-color: rgb(30, 96, 217); color: rgb(249, 249, 249);">New Stuff</a></li>
<li><a id="B1" href="/app/products.php">Products</a></li>
<li><a id="B2" href="/app/projects.php">Projects</a></li>
<li><a id="B3" href="/app/faq.php">FAQ</a></li>
<li><a id="B4" href="/app/cart.php">My Cart</a></li>
</ul>
</div>
</div>
<div class="content1">
<div id="NSDiv1">
<div id="NSContentContainer">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;" class="flex-active-slide" data-thumb-alt="">
<img src="/images/sh3.jpg" alt="1" draggable="false">
</li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" data-thumb-alt="">
<img class="lazy" data-src="/images/sh1.jpg" alt="2" draggable="false" src="/images/sh1.jpg">
</li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" data-thumb-alt="">
<img class="lazy" data-src="/images/sh2.jpg" alt="3" draggable="false">
</li>
</ul>
<ol class="flex-control-nav flex-control-paging"><li>1</li><li>2</li><li>3</li></ol><ul class="flex-direction-nav"><li class="flex-nav-prev"><a class="flex-prev" href="#">Previous</a></li><li class="flex-nav-next"><a class="flex-next" href="#">Next</a></li></ul></div>
</section>
</div>
<div id="NSContentContainer" style=" top: 45px; left: 13px; width: 525px; height: 250px;z-index: 6;">
</div>
</div>
<!-------------------- DIV2----------------- -->
<div id="NSDiv2">
<div id="NSContentContainer" style="height: 250px;">
</div>
<div id="NSContentContainer" style=" top: 45px; left: 13px; width: 525px; height: 400px; ">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;" class="flex-active-slide" data-thumb-alt="">
<img src="/images/sh2.jpg" alt="1" draggable="false">
</li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" data-thumb-alt="">
<img class="lazy" data-src="/images/sh3.jpg" alt="2" draggable="false" src="/images/sh3.jpg">
</li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" data-thumb-alt="">
<img class="lazy" data-src="/images/sh1.jpg" alt="3" draggable="false">
</li>
</ul>
<ol class="flex-control-nav flex-control-paging"><li>1</li><li>2</li><li>3</li></ol><ul class="flex-direction-nav"><li class="flex-nav-prev"><a class="flex-prev" href="#">Previous</a></li><li class="flex-nav-next"><a class="flex-next" href="#">Next</a></li></ul></div>
</section>
</div>
</div>
</div>
</div>
<div class="footerWrapper">
<div class="footerInnerContainer">
<div id="footerSection1">
<img id="smlFB" src="/../../images/trans.png" alt="logo">
<img id="smlTW" src="/../../images/trans.png" alt="logo">
<img id="smlIN" src="/../../images/trans.png" alt="logo">
<img id="smlYT" src="/../../images/trans.png" alt="logo">
<div id="fsm1">
</div><div id="fsm2">
</div><div id="fsm3">
</div>
</div><div id="footerSection2">
<!-- <img src="/../../images/mysterychest1.jpg" alt="0" style="position: absolute; left: 25px; top: 13px;">
<img src="/../../images/mysterychest(top2).png" alt="0" style="position: absolute; left: 25px; top: 4px;">-->
<!-- <span style="position: absolute; top: 175px; left: 100px; font-size: 16px;">Hobbiests serving Hobbiests</span>-->
</div><div id="footerSection3">
<form>
<span>Something to say?</span>
<textarea rows="5" cols="30" name="userMessage"> </textarea>
<span>Topic:</span>
<select>
<option>Bug report</option>
<option>Suggestions</option>
<option>Other</option>
</select>
<span>Email Address:</span>
<input type="text" name="UserEmail">
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
<link rel="stylesheet" href="/../FlexSlider/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="/../FlexSlider/jquery.flexslider-min.js"></script>
<script>
$(window).load(function () {
$('.flexslider').flexslider({
touch: true,
slideshow: true,
controlNav: true,
directionNav : true,
slideshowSpeed: 6000,
animationSpeed: 600,
initDelay: 0,
pauseOnAction: true,
start: function(slider) { // fires when the slider loads the first slide
var slide_count = slider.count - 1;
$('.slides').on('click', function () {
$(this).siblings('.flex-direction-nav').children('li').children('a.flex-next').trigger('click');
});
$(slider)
.find('img.lazy:eq(0)')
.each(function() {
var src = $(this).attr('data-src');
$(this).attr('src', src).removeProp('data-src');
});
},
before: function (slider) { // fires asynchronously with each slider animation
var slides = slider.slides,
index = slider.animatingTo,
$slide = $(slides[index]),
$img = $slide.find('img[data-src]'),
current = index,
nxt_slide = current + 1,
prev_slide = current - 1;
$slide
.parent()
.find('img.lazy:eq(' + current + '), img.lazy:eq(' + prev_slide + '), img.lazy:eq(' + nxt_slide + ')')
.each(function () {
var src = $(this).attr('data-src');
$(this).attr('src', src).removeProp('data-src');
});
},
// default setting
after: function(slider) {
/* auto-restart player if paused after action */
if (!slider.playing) {
slider.play();
}
}
});
});
</script>
<script>
function checkUrl(url) {
switch (url) {
case "":
return 1;
break;
case "newstuff.php": //REMOVE THIS AFTER
return 1;
break;
case "products.php":
return 2;
break;
case "projects.php":
return 3;
break;
case "faq.php":
return 4;
break;
case "cart.php":
return 5;
break;
}
}
$(document).ready(function () {
var array = window.location.pathname.split('/');
var lastsegment = array[array.length - 1];
$("ul.navList1 > li:nth-child(" + checkUrl(lastsegment) + ") > a").css({ "background-color": "#1E60D9", "color": "#f9f9f9" });
$("#logInBut").click(function () {
$("#LogInBox").fadeIn(1000);
$("#blackBackg").fadeIn(1000);
});
$("#blackBackg").click(function () {
$("#LogInBox").fadeOut(1000);
$("#blackBackg").fadeOut(1000);
});
$("#logEscape").click(function () {
$("#LogInBox").fadeOut(1000);
$("#blackBackg").fadeOut(1000);
});
$(".panelButton").mouseenter(function () {
$("span", this).css("color", "#f9f9f9");
$(this).css("background-color", "transparent");
});
$(".panelButton").mouseleave(function () {
$("span", this).css("color", "#222423");
$(this).css("background-color", "#f9f9f9");
});
$("ul.navList1 > li").mouseenter(function () {
$("a", this).css({ "background-color": "#1B4DA9", "color": "#f9f9f9" }); //#1B4DA9 , #001E56
});
$("ul.navList1 > li").mouseleave(function () {
$("a", this).css({ "background-color": "transparent", "color": "#1e1e1e" });
var array = window.location.pathname.split('/');
var lastsegment = array[array.length - 1];
$("ul.navList1 > li:nth-child(" + checkUrl(lastsegment) + ") > a").css({ "background-color": "#1E60D9", "color": "#f9f9f9" });
});
});
function navButtonHighlight() {
var url = window.location.pathname;
if (url == "/Template.php") {
document.getElementById("LogOutForm")
}
}
function SubmitLogOutForm() {
document.getElementById("LogOutForm").submit();
}
</script>
</body>

Well this is because of overflow, you need to use overflow:hidden in your css like this
.footerWrapper {
overflow:hidden;
}
It'll be all fine

Working Fine.
.footerInnerContainer{
display:block;
}

The above answers didn't work for me, but this did. Hope it helps somebody out.
.footerWrapper {
position: absolute;
bottom: -5px;
}

Weather App - Using Symbols instead of text

Ok, so I'm currently trying to create a simple weather app as part of learning how to use RSS feeds. I have the weather being displayed as text E.g. Friday: Sunny, Max Temp, Min Temp.
I want to change that text into symbols, so that instead of saying "Sunny" it displayed the image of a sun. I'll show the HTML and Javascript below. Hopefully it makes sense and I can get this problem sorted out.
HTML
<div id="home" data-role="page">
<div data-role="header" data-add-back-btn="true" >
<h1>Your Handy Little Weather App</h1>
</div>
<div data-role="content">
<img src ="./images/UWSLogo.png" width ="174" height ="116" alt ="Logo" align ="right"/>
<h2>UWS Weather</h2>
<p>Check the weather at the UWS Campuses.</p>
<p>Choose your desired location.</p>
<ul data-role="listview" data-inset="true">
<li><a id="ayrFeed" href="#ayr">Ayr</a></li>
<li><a id="dumfriesFeed" href="#dumfries">Dumfries</a></li>
<li><a id="hamiltonFeed" href="#hamilton">Hamilton</a></li>
<li><a id="paisleyFeed" href="#paisley">Paisley</a></li>
</ul>
<h2>Other Weather</h2>
<p>Find out more with our other weather options.</p>
<ul data-role="listview" data-inset="true">
<li><a id="uniFeed" href="#uni">Other Universities</a></li>
<li><a id="holidayFeed" href="#holiday">Popular Holiday Destinations</a> </li>
</ul>
</div>
</div>
</div>
<div id="ayr" data-role="page">
<div data-role="header">
<h1 id="ayrTitle"></h1>
</div>
<div data-role="content">
<ul id="ayrList" data-role="listview" data-inset="true">
<!-- Weather reports go here. -->
</ul>
</div>
</div>
<div id="dumfries" data-role="page">
<div data-role="header">
<h1 id="dumfriesTitle"></h1>
</div>
<div data-role="content">
<ul id="dumfriesList" data-role="listview" data-inset="true">
<!-- Weather reports go here. -->
</ul>
</div>
</div>
</div>
<div id="hamilton" data-role="page">
<div data-role="header">
<h1 id="hamiltonTitle"></h1>
</div>
<div data-role="content">
<ul id="hamiltonList" data-role="listview" data-inset="true">
<!-- Weather reports go here. -->
</ul>
</div>
</div>
Javscript
$(document).ready(function() {
$("#ayrFeed").bind('click', function() {
getFeed("http://open.live.bbc.co.uk/weather/feeds/en/2656708/3dayforecast.rss",
showAyrWeatherFeed);
});
$("#dumfriesFeed").bind('click', function() {
getFeed("http://open.live.bbc.co.uk/weather/feeds/en/2650798/3dayforecast.rss",
showDumfriesWeatherFeed);
});
$("#hamiltonFeed").bind('click', function() {
getFeed("http://open.live.bbc.co.uk/weather/feeds/en/2647570/3dayforecast.rss",
showHamiltonWeatherFeed);
});
function getFeed(url, success){
if(window.navigator.onLine) {
$.jGFeed(url, function(feeds) {
// Check for errors
if(!feeds){
// there was an error
return false;
} else {
localStorage.setItem(url, JSON.stringify(feeds));
success(feeds.title, feeds.entries);
}
});
} else {
// Get the fall-back...
var feed = JSON.parse(localStorage.getItem(url));
if(feed && feed.length > 0) {
success(feed.title, feed.entries);
}
}
}
function showPaisleyWeatherFeed(title, items) {
$("#paisleyTitle").text(title);
var list = $("#paisleyList");
list.empty();
for(var index = 0; index < items.length; index += 1) {
list.append(formatItem(items[index]));
}
$.mobile.changePage($("#paisley"), "flip");
list.listview("refresh");
}
function showHamiltonWeatherFeed(title, items) {
$("#hamiltonTitle").text(title);
var list = $("#hamiltonList");
list.empty();
for(var index = 0; index < items.length; index += 1) {
list.append(formatItem(items[index]));
}
$.mobile.changePage($("#hamilton"), "flip");
list.listview("refresh");
}
function formatItem(item) {
var listItem = document.createElement("li"),
anchor = document.createElement("a");
anchor.setAttribute("href", item.link);
anchor.innerText = item.title;
listItem.innerHTML = anchor.outerHTML;
return listItem.outerHTML;
}

<img src="url" alt="some_text">
Just add this to your code and include the url of the image you would like in the tag.

Here's a FIDDLE with little example if it helps you.
<div>New York Sunny 85F</div>
div {
background: #ddd;
width: 200px;
height: 80px;
line-height: 80px;
font-size: 23px;
text-align: center;
border-radius: 4px;
}
.weather-icon {
width: 38px;
height: 38px;
vertical-align: text-bottom;
}
$(function() {
$('div').html(function() {
return $(this).html().replace('Sunny','<img src="https://cdn1.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Sunny.png" class="weather-icon">');
});
});