Well, I have this slider wich is workin' with parallax content slider! And I would like to have the image at the place of the text and vice versa! I've come to change it but as soon as I pass to the next slider it returns to it initial position!
.da-slide-current .da-img {
left: 10%;
opacity: 1;
}
jsfiddle
Any way I can achieve that? Much appreciated.
You can play with the div positions:
<html lang="en" class=" js cssanimations csstransitions"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Parallax Content Slider with CSS3 and jQuery</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Parallax Content Slider with CSS3 and jQuery">
<meta name="keywords" content="slider, animations, parallax, delayed, easing, jquery, css3, kendo UI">
<meta name="author" content="Codrops">
<base href="http://tympanus.net/Development/ParallaxContentSlider/" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
<link href="http://fonts.googleapis.com/css?family=Economica:700,400italic" rel="stylesheet" type="text/css">
<noscript>
<link rel="stylesheet" type="text/css" href="css/nojs.css" />
</noscript>
</head>
<body>
<div class="container">
<div id="da-slider" class="da-slider" style="position:relative;">
<div class="da-slide da-slide-current" >
<h2 style="position:absolute;top:50%;">Warn WWelcome</h2>
<p style="position:absolute;top:25%;">When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
<div class="da-img"><img src="images/1.png" alt="image01"></div>
</div>
<div class="da-slide" >
<h2 style="position:absolute;top:50%;">Easy management</h2>
<p style="position:absolute;top:25%;">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<div class="da-img"><img src="images/2.png" alt="image01"></div>
</div>
<div class="da-slide" >
<h2 style="position:absolute;top:50%;">Revolution</h2>
<p style="position:absolute;top:25%;">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
<div class="da-img"><img src="images/3.png" alt="image01"></div>
</div>
<div class="da-slide" >
<h2 style="position:absolute;top:50%;">Quality Control</h2>
<p style="position:absolute;top:25%;">Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
<div class="da-img"><img src="images/4.png" alt="image01"></div>
</div>
<nav class="da-arrows">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</nav>
<nav class="da-dots"><span class="da-dots-current"></span><span></span><span></span><span></span></nav></div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
<script type="text/javascript">
$(function() {
$('#da-slider').cslider();
});
</script>
</body></html>
http://jsfiddle.net/YakV7/36/
Related
I want to get an image from an object in JavaScript and display it via HTML.
The text parts are working fine, like the movie name etc., but I cannot see my image. The only thing I see is black_adam.jpg as text.
The image is in the same folder as my index.html. I tried to add a slash in front of imgFile: "/black_adam.jpg".
This is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<!-- FAVICON -->
<link rel="icon" type="image/png" sizes="32x32" href="#" />
<!-- FONTS -->
<!-- ICON LIBRARY -->
<!-- PROJECT STYLES -->
<!-- <link rel="stylesheet" href="style.css"> -->
<style>
.movie {
width: 200px;
height: 300px;
background-color: black;
color: #fff;
}
</style>
</head>
<body style="font-family: 'Segoe UI', sans-serif">
<div class="movie">
<div class="img"></div>
<h2 class="movie-title">/h2>
<p class="release"></p>
<p class="duur"></p>
<p class="cast"></p>
</div>
<script>
const movieEl = document.querySelector(".movie");
const movie = {
id: 1,
name: "Black Adam",
description:
"Nearly 5,000 years after he was bestowed with the almighty powers of the Egyptian gods-and imprisoned just as quickly-Black Adam (Johnson) is freed from his earthly tomb, ready to unleash his unique form of justice on the modern world.",
releaseYear: 2022,
runtime: "2 hr 4 min",
rating: 6.9,
cast: ["Dwayne Johnson", " Aldis, Hodge", " Pierce Brosnan"],
imgFile: "black_adam.jpg"
};
movieEl.innerHTML =
`
<div class="img">${movie.imgFile}
<h2 class="movie-title">${movie.name}</h2>
<p class="release">${movie.releaseYear}</p>
<p class="duur">${movie.runtime}</p>
<p class="cast">${movie.cast} </p>
</div>
`
</script>
</body>
</html>
Why does it not work this way?
The reason you're seeing your file name as text is that you've done nothing to display the image as an image in your HTML
The line <div class="img">${movie.imgFile}, aside from not having a close tag for your </div>, should be written as follows
<div class="img">
<img src="${movie.imgFile}" />
</div>
or in a single line if you prefer
<div class="img"><img src="${movie.imgFile}" /></div>
I'm trying to transfer an image element, which is hosted on the cloud, from one file to another but it's not working.
I tried to insert the image in the HTML when it loads but it's telling me that the image variable is null.
MY FIRST HTML FILE(source file)
<div class="card">
<img src="https://res.cloudinary.com/mo1/image/upload/v1564584621/kobe_lq48jt.jpg" id="mentorPicOne" alt="">
<strong><p>Kobe Bryant </p></strong>
<div class="mentor-info">
<input type="checkbox" id="check_id">
<label for="check_id"></label>
<ul>
<li><strong>Bio: </strong> A 44-year old husband and father of 2.</li><br>
<li><strong>Occupation: </strong> Retired professional basketball player</li><br>
<li><strong>Expertise: </strong> 5 years</li><br>
<button class="reach-btn" onclick="openPage()"> Reach Out</button>
</ul>
</div>
</div>
MY SECOND HTML FILE (destination file)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/x-icon" href="../images/accusoft.png">
<link rel="stylesheet" href="../assets/css/all.css">
<link rel="stylesheet" href="../css/my_mentor.css">
<title>Free Mentors | My Mentor </title>
</head>
<body onload="onload()">
<div class="main-container">
<header class="header">
<a class="logo" href="/">
<span id="logo-icon">
<i class="fab fa-accusoft"></i>
</span>
<h3>Free<span id="free-mentors">Mentors</span></h3>
</a>
<div class="register-buttons">
<button class="button">Back</button>
<button class="button" id="admin-dash">Log Out</button>
</div>
</header>
<h2>My Mentor</h2>
<main class="content-container">
<div class="selected-mentor">
</div>
</main>
<footer class="footer">
<p>© Free Mentors 2019</p>
</footer>
</div>
</body>
<script src="../js/my_mentor.js" type="text/javascript"></script>
</html>
JavaScript File (my_mentor.js)
const mentorPicOne = document.getElementById('mentorPicOne'); ;
const selectedMentor = document.querySelector('.selected-mentor')
console.log('The selected', mentorPicOne)
openPage = async ()=>{
window.location.assign('./my_mentor.html');
}
function onload(){
selectedMentor.innerHTML = mentorPicOne;
}
I want to be able to click the React Out button, hence executing the openPage function, and then go the my_mentor page having the image inside of it.
I'd really appreciate your help. Thanks.
what do you mean by transferring from one file to other? its just a url, it can be placed in both pages. the image is not really on the page, its requesting it from your url and showing it in your html.
I have issues with bootstrap tooltip title when I'm using data-html="true" for the title. I'm using html tags in tooltip title for font styles and line break. For this I used data-html="true". However when i used < (less than) icon, tooltip title text not displayed after less than icon (<)
<html><head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
Tooltip
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
<html><head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<a href="#" data-html="true" data-toggle="tooltip" data-original-title='title with <br/> special character < less than over me Hooray!'>Tooltip </a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>`
Just give space between special character and word. Othere it will parse as html tags or use <.
I am working on a html which already works integrated on a application. On this html there was 3 buttons and I add new one. This 3 button showen together when you click anyone on screen but new one do not seem. How can its possible. How can I solve this problem.
This is what I want:
(When I click Navigation button all buttons seen, but when I click another button new button do not seem which named 180 day Documents)
This situation valid for all button without "Navigation" but I could not load picture. I mean when You click to second button too, New button do not seem.
When you click Third button:
(Same problem valid too when click view button)
For this html there was a ready html and I add new button on it.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<link rel="stylesheet" type="text/css" href="css/pwietp.css" media="screen" id="screenCSS" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" id="printCSS" />
<link rel="stylesheet" type="text/css" href="css/evoslider/evoslider.css" />
<script type="text/javascript" src="js/jquery.combined.js"></script>
<script type="text/javascript" src="js/ietp-common.js"></script>
<script type="text/javascript" src="js/ietp-nav.js"></script>
<script type="text/javascript" src="js/ietp-search.js"></script>
</head>
<body>
<div id="wrapper"><div id="bar">
<div id="menu">About</div>
<div id="logoDiv"><img id="logo" src="images/logo.png" /></div>
<form id="search_toolbar" method="get" action="/solr/select">
<input id="searchinput" type="text" name="q" value="search" size="28" maxlength="140" onfocus="searchBarOnFocus(this)" onblur="searchBarOnBlur(this)" />
</form>
</div>
<div id="tabcontainer">
<div id="tabs" class="nav">
<span><a id="navtab" href="#" class="btn-highlight">Navigation</a></span>
<span><a id="searchtab" href="/solr/select" class="btn">Search</a></span>
<span><a id="viewtab" href="#" class="btn">View</a></span>
<span><a id="180DayDocumentstab" href="#" class="btn">180 Day Documents</a></span>
<div class="outer-container"><div class="container">
<div id="navigationContainer"><div class="navSection">
<div class="outer-container"><div class="container">
<div class="header navigationPMTitle"><span class="crumb" id="crumb">
Home
<span>|</span>Issue No: 013<span>|</span>Issue Date:
2017-02-01</div></div><div id="navSortButtons" class="header navSortButtons">Sort by:
Tile
Techname
Infoname
DMC</div></div>
<div class="navSection"><div id="navigationFolders">
<div class="navTitleDiv"><h3 class="removeBottomPadding">Contents</h3></div>
<div id="navigationFoldersDiv">
<ul class="treeView" name="treeView">
</ul>
</div></div>
<div id="navigationDocuments">
<div id="navDocumentsTitleSection" class="navTitleDiv hide"><h3 class="removeBottomPadding" id="navDocumentsTitle"></h3></div>
<div id="navigationDocumentsDiv"></div></div></div></div></div></div>
<div id="footer">
International Aero Engines Proprietary Information © 2014 - 2017.
EAR Export Classification: Not subject to the EAR per 15 C.F.R. Chapter 1, Part 734.3(b)(3).</div></div>
</body>
</html>
Actually, if i copy your code (only the span tags) and i remove the closing span after the <a id="180dayDocumentsTab"> all the span tags show up on my screen. Remove the </span> after this anchor tag and you'll be good to go.
<span><a id="180DayDocumentstab" href="#" class="btn">180 Day Documents</a></span>
Close the <span class="crumb" id="crumb"> because it's ruining your divs after that. Use fiddle Tidy option to help you get a nicer code and it will help you get a look on missing closing tags or any other small code errors. A clear code will make you spot any mistake much faster.
I've spent 4 hours trying to get through this, and I couldn't find a solution yet so far. Basically what I'm trying to do is add a description to each picture in the slide. So, when the picture switches, the description must switch as well. So far I've tryed a lot of stuff but nothing seems to trigger the changes. This is what i've done now
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
<title>Nivo Slider Demo</title>
<link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
dev7studios
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" id="foto1" />
<img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" id="foto2" />
<img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" id="foto3" />
<img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" id="foto4" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with a link.
</div>
</div>
</div>
<!-- my Code -->
<div class="descriptionOff" id="first">
Description 1
</div>
<div class="descriptionOff" id="second">
Description 2
</div>
<div class="descriptionOff" id="third">
Description 3
</div>
<div class="descriptionOff" id="fourth">
Description 4
</div>
<!-- :::::::::::::: -->
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="scripts/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<script type="text/javascript" src="scripts/andri.js"></script>
So, I've put some div with the descriptions and added some ID on the pictures;
.Description{
display:block;
}
.descriptionOff{
display:none;
}
In the css I've added these 2 classes that the descriptions have to use to show or not themselves;
if($("#foto1").hasClass("nivo-main-image")){
$("#first").toggleClass("Description");
}
And this is the simple line of code I've added in (a different file of) js: basically, if the first photo has class nivo-main-image (which is the class that shows the pictures in the slide), it should toggle the class of the first description to show it (the if statement is not complete, of course I would have done the same for the other descriptions). But nothing happens, the class doesn't switch. So, I ask you for help, or if you have any other solution and if you share it, I would appreciate that a lot.
I haven't really tested this, but have you tried wrapping your slider images in spans and adding your caption inside it (after the img)?
Like so:
<div id="slider" class="nivoSlider">
<span><img src="slide1.jpg" /><p>This is my non-default caption!</p></span>
<img src="slide2.jpg" />
<img src="slide3.jpg" />
</div>