Changing the look of div/img - javascript

Below is the code of the first picture (the green one). I want to modify the boxes to look like the boxes in the picture 2 (the one with the red in the middle).
Should I add another class to the img or `id? How can I modify the boxes in first pic so they will look like the ones in the second pic?
What kind of code I am supposed to write in CSS file to change the look of them?
$(document).ready(function() {
$('.carousel').carousel();
});
.carousel-item{
position: absolute;
background:green;
}
img {
width: 150px;
position: relative;
border-radius: 10px;
}
<html lang="">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="{% static 'functionality/imageslider.js' %}"></script>
<link rel="stylesheet" type='text/css' href="{% static 'blog/imageslider.css' %}">
</head>
<body>
<div class="carousel">
<div class="carousel-item" id="one"
><img src="/media/carousel-pics/photo-1454942901704-3c44c11b2ad1.jpg" alt="">
</div>
<div class="carousel-item" id="two"
><img src="/media/carousel-pics/photo-1454942901704-3c44c11b2ad1.jpg" alt="" />
</div>
<div class="carousel-item" id="three"
><img src="/media/carousel-pics/photo-1454942901704-3c44c11b2ad1.jpg" alt=""/>
</div>
<div class="carousel-item" id="four"
><img
src="/media/carousel-pics/photo-1454942901704-3c44c11b2ad1.jpg"
alt=""/>
</div>
</div>
</body>
</html>

Related

How can i change the content of a modal without closing it?

I have a modal that opens up when i click a button, the thing is that i have 2 buttons that open the same modal but with different contents, so if i click the same button when the modal is opened, it'll close. That's workin' fine, what i wanna do, and can't do, is change the content of the modal without closing it when i click the button that doesn't opened it. Can anyone help me with this? That's the code i'm using:
HTML:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/style.css">
<title>EA - Need for Speed Test Page</title>
</head>
<body>
<header>
<nav class="menu-togglers is-visible">
<ul>
<li class="dropdown-toggler account" id="account"><i class="far fa-user"></i></li>
<li class="dropdown-toggler help" id="help"><i class="fas fa-question"></i></li>
<li><i class="fas fa-gamepad"></i></li>
</ul>
</nav>
<!--menu-togglers-->
<div class="dropdown-menu is-not-collapsed" id="dropdown-menu">
<img id="close-dropdown" class="dropdown-toggler" src="assets/x-lg.svg">
<div class="account-container menu-container opacity-0">
<div id="account-item" class="menu-content">
<a href="">
<img src="assets/connectEA.svg" alt="">
<p>Sign In</p>
</a>
</div>
<!--account-item-->
<div id="account-item" class="menu-content">
<a href="">
<img src="assets/createAccountEA.svg" alt="">
<p>Create Account</p>
</a>
</div>
<!--account-item-->
</div>
<!--account-container-->
<div class="help-container menu-container opacity-0">
<div id="help-item" class="menu-content">
<a href="">
<img src="assets/originIcon.svg" alt="">
<p>Verify my Origin Login</p>
</a>
</div>
<!--help-item-->
<div id="help-item" class="menu-content">
<a href="">
<img src="assets/linkAccount.svg" alt="">
<p>Link my Origin to my PSN ID</p>
</a>
</div>
<!--help-item-->
<div id="help-item" class="menu-content">
<a href="">
<img src="assets/rescueCode.svg" alt="">
<p>How do I redeem a Code?</p>
</a>
</div>
<!--help-item-->
<div id="help-item" class="menu-content">
<a href="">
<img src="assets/errorIcon.svg" alt="">
<p>I can't play online!</p>
</a>
</div>
<!--help-item-->
</div>
<!--account-container-->
</div>
<!--dropdown-menu-->
</header>
<!--header-->
<div style="height: 2000px;"></div>
<script src="js/hideHeader.js"></script>
<script src="js/setMenus.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EA - Need for Speed Test Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lity/2.4.1/lity.css" integrity="sha512-NDcw4w5Uk5nra1mdgmYYbghnm2azNRbxeI63fd3Zw72aYzFYdBGgODILLl1tHZezbC8Kep/Ep/civILr5nd1Qw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.modalDialog{
width: 90%;
position: fixed;
left: 50%;
right: 0;
margin: 0 auto;
top: 50%;
background: white;
transform: translate(-50%,-50%);
padding: 50px;
max-width: 600px;
border: 1px solid black;
color: black;
}
.modalcont{font-size:16px; color:black;}
</style>
</head>
<body>
<header>
<div class="button">
<a class="modalopen" href="javascript:void(0);" datacontent="testingone">modal open</a>
</div>
</header>
<!--header-->
<footer>
<div id="openModal" class="modalDialog" style="display:none;">
<div>
X
<div class="modalcont">testingone</div>
button one
button two
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
jQuery(document).ready(function(){
jQuery('.modalopen').on('click',function(){
var sun = jQuery(this).attr('datacontent');
jQuery('#openModal').show(500);
jQuery('#openModal .modalcont').html(''+sun+'');
//alert(sun);
});
jQuery('.btn').on('click',function(){
var sun = jQuery(this).attr('datacontent');
//alert(sun);
jQuery('#openModal .modalcont').html(sun);
//alert(sun);
});
jQuery('.close').on('click',function(){
jQuery('#openModal').hide(500);
jQuery('#openModal .modalcont').html();
});
});
</script>
</body>
</html>

I want to open onclick two pages one internal and one external

can you tell me how to fix it on this code exactly? here I have two internal codes and two external (to youtube)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>LS_model</title>
<link href="ls.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
<div id="space"><br></div>
<div id="container">
<div id="wb_Image1" style="position:absolute;left:62px;top:291px;width:876px;height:524px;z-index:0;">
<img src="images/Background.png" id="Image1" alt=""></div>
<div id="wb_Image2" style="position:absolute;left:75px;top:31px;width:840px;height:260px;z-index:1;">
<img src="images/ads.gif" id="Image2" alt=""></div>
<div id="wb_Image3" style="position:absolute;left:126px;top:343px;width:140px;height:57px;z-index:2;">
<img src="images/videoss-b.gif" id="Image3" alt=""></div>
<div id="wb_Image4" style="position:absolute;left:723px;top:344px;width:140px;height:56px;z-index:3;">
<img src="images/Photos-b.gif" id="Image4" alt=""></div>
</div>
</body>
</html>
Try this
Use window.open to open two pages and remove return false from your code.
<img src="images/Photos-b.gif" id="Image4" alt="">
For opening in a new tab, use:
window.open('https://www.youtube.com/watch?v=5u7ytZmxstY', '_blank');
And for opening internal, use:
window.open('https://www.youtube.com/watch?v=5u7ytZmxstY');

image src transitions appears for the user

I was doing a simple design for a mobile phonegap application and i just wanted to change the src of an image in a div according to a certain click event but this src is in another div and when the src changes according to the click the transition between the previous src of the image and the next src appears for the user and i just dont want such Defoe in the application..
So all what i need is to make the src change while moving to the other div of the app without letting the user notice such a thing
....Here are my html,css,javascript
document.getElementById("Golds").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="goldsgymlogo.png";
x.style.display = "inline";
});
document.getElementById("Titans").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="Titans.jpg";
x.style.display = "inline";
});
document.getElementById("Smart").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="smart.png";
x.style.display = "inline";
});
document.getElementById("SamiaAllouba").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="Samia-Allouba.jpg";
x.style.display = "inline";
});
document.getElementById("Fibers").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="fibers.jpg";
x.style.display = "inline";
});
/*
Thats My CSS
*/
#GymLogin{
display: none;
margin-left:30%;
margin-top:15%;
max-width:135px;
max-height:135px;
}
<!--HTML CODE HERE-->
<!DOCTYPE html>
<html>
<head>
<title>Phone Gap trial</title>
<link rel= 'stylesheet' href='css/bootstrap.css' />
<link rel= 'stylesheet' href='css/font-awesome.min.css' />
<link rel= 'stylesheet' href='css/style.css' />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="childbrowser.js"></script>
<script type="text/javascript" charset="utf-8" src="Torch.js"></script>
</head>
<body>
<div id="start" class="ourteam text-center">
<!--start container-->
<div class="team">
<section class="header">
<div>
<h1>Train & Game</h1>
</div>
</section>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="person">
<img id="Golds" class="teamphotos img-circle" src="img\goldsgymlogo.png"/>
<h6>Gold's Gym</h6>
</div>
</div>
<div class="col-xs-4">
<div class="person">
<img id="Titans" class="teamphotos img-circle" src="img\Titans.jpg"/>
<h6>Titans Gym</h6>
</div>
</div>
<div class="col-xs-4">
<div class="person">
<img id="Smart" class="teamphotos img-circle" src="img\smart.png"/>
<h6>Smart Gym</h6>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-6">
<div class="person">
<img id="SamiaAllouba" class="teamphotos img-circle" src="img\Samia-Allouba.jpg"/>
<h6>Samia Allouba</h6>
</div>
</div>
<div class="col-xs-6">
<div class="person">
<img id="Fibers" class="teamphotos img-circle" src="img\fibers.jpg"/>
<h6>Fibers Gym</h6>
</div>
</div>
</div>
</div>
<!--end container-->
</div>
<!--end team-->
</div>
<!--Our team div end-->
<!-- Start Login Page -->
<div data-role="page" id="loginpage" onblur="deletesrc()">
<img id="GymLogin" class="img-circle" src=""/>
<input type="text" size="15" id="Usernameinput" placeholder="Username">
<span id="asterisk1" class="asterisk"> </span>
<input type="password" id="Passwordinput" placeholder="Password">
<span id="asterisk2" class="asterisk"> </span>
<button class="btn btn-danger" id="GymName">Omar</button>
</div>
<!-- End Login Page -->
<script src="js/jquery-2.1.4.min.js"> </script>
<script src="js/jquery.mobile-1.4.5.min.js"> </script>
<script src="js/bootstrap.min.js"> </script>
<script src="js/index.js"></script>
</body>
</html>
Although there's much better ways to do what you're trying to do, you can try this it might help
Instead of changing the ".src" of the images, just have multiple images loaded and hidden, and change the the display of the one you want.
So your HTML becoms
<img id="golds" class="GymLogin img-circle" src="golds..."/>
<img class="GymLogin img-circle" src="titans..."/>
<img class="GymLogin img-circle" src="samia..."/>
<img class="GymLogin img-circle" src="fibers..."/>
Your css
.GymLogin{
opacity: 0;
}
Your javascript
document.getElementById("Golds").addEventListener('touchstart', function(){
$('.GymLogin').hide();
$('#golds').show();
});
Haven't tried it but you get the idea.

How do I build a carousel image slider using MVC cshtml?

I am trying to code a carousel image slider in MVC using cshtml, the pictures are only displaying in one vertical row and isn't populating into the Carousel slider itself?
Here is what I have attempted so far:
Html.Raw("<link href='../../Content/Site.css' rel='stylesheet'>")
#Html.Raw("<script src='../../Scripts/jquery-1.5.1.min.js'></script>")
Products
<script src="Scripts/jquery.cycle.all.js"></script>
<script src="Scripts/jquery.cycle.all.js"></script>
<script type="text/javascript"> $('#slider').cycle({ fx: 'fade', speed: 'fast', timeout: 0, next: '#next2', prev: '#prev2' });
</script>
<link rel="stylesheet" href="Content/css/feature-carousel.css" charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="Content/css/feature-carousel.css" charset="utf-8" />
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
<script src="Content/js/jquery-1.7.min.js"></script>
<script src="Content/js/jquery.featureCarousel.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function ()
{
var carousel = $("#carousel").featureCarousel({
// include options like this:
// (use quotes only for string values, and no trailing comma after last option)
// option: value,
// option: value
});
$("#but_prev").click(function () {
carousel.prev();
});
$("#but_pause").click(function () {
carousel.pause();
});
$("#but_start").click(function () {
carousel.start();
});
$("#but_next").click(function () {
carousel.next();
});
});
</script>
<center>
<div class="carousel-container"></div>
<div id="carousel">
<div class="carousel-feature">
<img class="carousel-image" alt="Image Caption" src="~/Images/1.jpg" />
<div class="carousel-caption">
</div>
</div>
<div class="carousel-feature">
<img class="carousel-image" alt="Image Caption" src="~/Images/2.jpg">
<div class="carousel-caption">
</div>
</div>
<div class="carousel-feature">
<img class="carousel-image" alt="Image Caption" src="~/Images/3.jpg">
</div>
<div class="carousel-feature">
<img class="carousel-image" alt="Image Caption" src="~/Images/4.jpg">
<div class="carousel-caption">
</div>
</div>
<div class="carousel-feature">
<img class="carousel-image" alt="Image Caption" src="~/Images/5.jpg">
<div class="carousel-caption">
</div>
</div>
<div id="carousel-left"><img src="~/Content/images/arrow-left.png" /></div>
<div id="carousel-right"><img src="~/Content/images/arrow-right.png" /></div>
</div>
</center>
I found there are multiple jQuery references in view.
<script src='../../Scripts/jquery-1.5.1.min.js'></script>
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
<script src="Content/js/jquery-1.7.min.js"></script>
Remove multiple jQuery references from the view.
Only one is enough.
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>

GoodMap API3 with PhoneGap

I work on application in which i need map i worked in map module and in browser it shows correct result but as it is an mobile application so i run it into emulator and the following error occues
Uncaught TypeError: object is not a function at file:///android_asset/www/nav-map.html:3
my html file Nav-map.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.0.css">
<script src="js/hsmain.min.js"></script>
<link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />
<link href="photoswipe/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="photoswipe/klass.min.js"></script>
<script type="text/javascript" src="photoswipe/code.photoswipe.jquery-3.0.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jqm-datebox.min.css" />
<script src="js/jqm-datebox.core.min.js"></script>
<script src="js/jqm-datebox-1.1.0.mode.datebox.js"></script>
<script src="js/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src="js/camera.js"></script>
<script src="lib/work-space.js"></script>
<script src="lib/config.js"></script>
<script src="lib/userprofile.js"></script>
<script src="lib/loginlogout.js"></script>
<script src="lib/binder.js"></script>
<script src="lib/newsfeed.js"></script>
<script src="lib/harvestdata.js"></script>
<script src="lib/members.js"></script>
<script src="lib/pictures.js"></script>
<script src="lib/properties.js"></script>
<script src="lib/clubnewsfeeds.js"></script>
<script src="lib/jsutility.js"></script>
<script src="lib/weather.js"></script>
<script src="lib/groups.js"></script>
<script src="lib/groupnewsfeeds.js"></script>
<script src="lib/companies.js"></script>
<script src="lib/companynewsfeeds.js"></script>
<script src="lib/map.js"></script>
<script src="lib/searching.js"></script>
<script src="lib/notitfications.js"></script>
<link href="960/jquery-mobile-fluid960.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style>
#map-canvas
{
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body>
<div data-role="page" id="ClubMapPage">
<!--header-->
<script>$('#ClubMapPage').on('pageshow',function(){
UserProfile.loadProfile();
Notifications.getTopNotification();
Properties.getClubNameAndImage();
Map.getMap();
})
</script>
<div id="landing-header" data-role="header" data-position="fixed" data-tap-toggle="false">
<div class="container_12 padding5">
<div class="grid_1">
<span class="inline-button floatleft">Back</span>
</div>
<div class="grid_10">
<div class="hs-icon-wrap">
<span class="dropdown inline-button"><a class="hs-request dropdown-toggle showRequestsBtn" data-toggle="dropdown" data-role="button" href="#messages" data-iconpos="notext" >Requests</a>
</span>
<span class="dropdown inline-button"><a class="hs-notification dropdown-toggle showNotificationsBtn" data-role="button" href="#" data-toggle="dropdown" data-iconpos="notext" >Notifications</a>
</span>
</div>
</div>
<div class="grid_1">
<span class="inline-button floatright">Right</span>
</div>
</div>
</div>
<!--contents-->
<div data-role="content" class="hs-content">
<div class="hs-notifications-menu-contents-wrap feeds-content-header HSnotifications">
<div class="hs-notification-menu-heading">
Notifications
<a title="Remove" class="removebutton hideNotificationsBtn" href="javascript://" >Remove </a>
</div>
<div class="hs-notifications-menu-items-wrap" >
<ul class="hs-notificatin-list notificationul">
</ul>
</div>
<div class="hs-notification-menu-footer">
<a class="seemore" href="#" title="">
<span>See All</span>
</a>
</div>
</div>
<!-- End Of Notifications -->
<div class=" hs-notifications-menu-contents-wrap feeds-content-header HSrequests" >
<div class="hs-notification-menu-heading">
Requests
<a title="Remove" class="removebutton hideRequestsBtn" href="#" >Remove </a>
</div>
<div class="hs-notifications-menu-items-wrap" style="">
<ul class="hs-notificatin-list requestul">
</ul>
</div>
<div class="hs-notification-menu-footer">
<a class="seemore" href="#" title="">
<span>See All</span>
</a>
</div>
</div>
<!-- end of requests -->
<div class="container_12">
<div class="content-header">
<h4><img class="smallClubImage" alt="" src="images/header-small-image.png" /></h4>
Info
<div data-role="navbar" class="nav-glyphish-example" data-grid="c">
<ul>
<li class="no-border">Members</li>
<li class="active">Map</li>
<li>Harvest</li>
<li><a href="clubpages/albums.html" id="nav-picture" data-icon="custom" >Picture</a></li>
</ul>
</div>
</div>
<div class="content-wrap map-wrap">
<div id="map-canvas" style="height:500px; width:100%; margin:0; padding:0">
</div>
</div>
</div>
</div>
</div>
I had the same error but I solved it two months ago!
I was because a jquery plugin of mine was not ending in ;
You can Try to end your JS lines with ; I can see you don't follow this best practices advice. So, add it to you own js files (at the end) in order to let the files concatenation understand That a new file is really a new single function (or statement)
Sorry If this is not the solution to your problem! Thank you for reading
Hi there is some problem with your class names you put the class names same as some keywords like Image you cannot put Image as a class name also check if other same problem exist i think you should check by using some IDE it will shows the special names in different color.
also change the class name Map
I had the same error once i think it will help you
Thanks

Categories