I'm trying to implement the Wallop slider: http://pedroduarte.me/wallop/
My ultimate goal is to have a another Wallop slider within another Wallop slider.
The problem occurs when I'm trying to set the options for the Wallop slider.
Without options it works as demonstrated here:
http://pinefallstudios.com/wallop/without_options.html
The code is:
<html>
<head>
<script type="text/javascript" src="Wallop.js"></script>
<link rel="stylesheet" href="wallop.css">
<link rel="stylesheet" href="wallop--slide.css">
</head>
<body>
</body>
<div class="Wallop Wallop--slide">
<div class="Wallop-list">
<div class="Wallop-item Wallop-item--current">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
<div class="Wallop-item">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
<div class="Wallop-item">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
</div>
</div>
<script type="text/javascript">
var wallopEl = document.querySelector('.Wallop');
var wallop = new Wallop(wallopEl);
function onClickNext() {
wallop.next();
}
</script>
</html>
However when I try to set itemClass and currentItemClass to something else it stops working as demonstrated here: http://pinefallstudios.com/wallop/with_options.html
Code:
<html>
<head>
<script type="text/javascript" src="Wallop.js"></script>
<link rel="stylesheet" href="wallop.css">
<link rel="stylesheet" href="wallop--slide.css">
</head>
<body>
</body>
<div class="Wallop-outer Wallop--slide">
<div class="Wallop-list">
<div class="Wallop-outer-item Wallop-outer-item--current">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
<div class="Wallop-outer-item">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
<div class="Wallop-outer-item">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
</div>
</div>
<script type="text/javascript">
var wallopOuterOptions = {
itemClass: 'Wallop-outer-item',
currentItemClass: 'Wallop-outer-item--current'
}
var wallopEl = document.querySelector('.Wallop-outer');
var wallop = new Wallop(wallopEl, wallopOuterOptions);
function onClickNext() {
wallop.next();
}
</script>
</html>
I verified that the other options are being set correctly, as you can see in the console, as I'm only setting two options out of several.
What is causing this problem and how can I name my Wallop items so that I can use another inner slider?
Update
As explained by #HungCao it's probably due to the CSS rules.
However, how would one create an inner slider in this case?
This doesn't work as demonstrated here: http://pinefallstudios.com/wallop/with_inner.html
Code:
<html>
<head>
<script type="text/javascript" src="Wallop.js"></script>
<link rel="stylesheet" href="wallop.css">
<link rel="stylesheet" href="wallop--slide.css">
</head>
<body>
</body>
<!-- Outer Slide -->
<div class="Wallop-outer Wallop--slide">
<div class="Wallop-list">
<div class="Wallop-item Wallop-item--current">
<img onclick="onClickOuterNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
<div class="Wallop-item">
<h3>Inner Slider</h3>
<!-- Inner Slide -->
<div class="Wallop-inner Wallop--slide">
<div class="Wallop-list">
<div class="Wallop-item Wallop-item-current">
<img onclick="onClickInnerNext();" src="http://pedroduarte.me/wallop/141b5b913de38d376ab9c633f344d401.gif" />
</div>
<div class="Wallop-item">
<img onclick="onClickInnerNext();" src="http://pedroduarte.me/wallop/141b5b913de38d376ab9c633f344d401.gif" />
</div>
</div>
</div>
</div>
<div class="Wallop-item">
<img onclick="onClickOuterNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
</div>
</div>
<script type="text/javascript">
var wallopOuterEl = document.querySelector('.Wallop-outer');
var wallopOuter = new Wallop(wallopOuterEl);
var wallopInnerEl = document.querySelector('.Wallop-inner');
var wallopInner = new Wallop(wallopInnerEl);
function onClickOuterNext() {
wallopOuter.next();
}
function onClickInnerNext(){
wallopInner.next();
}
</script>
</html>
I think the problem is your new classes are overriding some css rules from the original one.
Look at these 2 blocks
Without options:
<div class="Wallop Wallop--slide">
<div class="Wallop-list">
<div class="Wallop-item Wallop-item--current">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
<div class="Wallop-item">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
<div class="Wallop-item">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
</div>
</div>
With options:
<div class="Wallop-outer Wallop--slide">
<div class="Wallop-list">
<div class="Wallop-outer-item Wallop-outer-item--current">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
<div class="Wallop-outer-item">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
<div class="Wallop-outer-item">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
</div>
</div>
Do you have any special css rule? Otherwise you should maintain their css rules.
Related
I connected my templete.php to style.css but when I am changing anything in templete.php, it's showing the result but if I change anything in the stylesheet, it shows no result. what should I do?
My website is not live. i am doing it on wamp server.
templete.php
<!DOCTYPE html>
<html>
<head lang="en">
<title>SEO SOBER</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Merienda"
rel="stylesheet"
<head>
<body>
<header id="particles-js">
<?php
include "navbar.php";
?>
</header>
<!--..... header ends.......-->
<div class="clients">
<h3>Our Clients</h3>
<img class="client-img" src="images/clients.png">
</div>
<!--clients ends -->
<div class="container-About">
<div class="text">
<h3>SEO SOBER Digital Story</h3>
<p>about company</p>
</div>
<div class="button">
READ MORE
</div>
</div>
<!-- about ends -->
<div class="features">
<h3>Services</h3>
<div class="maincontainer">
<!-- first card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/seo-gif-10.gif">
<h4>Search Engine Optimization</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<!-- second card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/web-design-service.gif">
<h4>Web Design</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<!-- third card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/Development.gif">
<h4>Web Development</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<!-- fourth card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/social.gif">
<h4>Social Media Marketing</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<div class="clearfix">
</div>
</div>
</div>
<!-- services end-->
<script src="js/particles.js"></script>
<script src="js/particles.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
please tell me what to do...
I am trying to do changes for half an hour but nothing happenes.
I also add the particles effect. is that the problem?
i think you are loading your cache, you have to hard reset your page. Try reloading like this on your page:
> -Hold the Ctrl key and press the F5 key.
> -Hold the ⇧ Shift key and click the Reload button on the navigation toolbar.
> -Hold the Ctrl key and click the Reload button on the navigation toolbar.
> -Hold the ⇧ Shift key and press the F5 key.
I'm having trouble on a project I mentioned earlier, now the problem is that I want to drag a div and drop it to another div. If I drag a div then it should be added below the previously dropped div. How can I achieve that? My current code is not appending the next div dropped, it overwrites the first one. I have tried many solutions but all end up doing more damage than good. Can anybody please help me, Thank you.
<html>
<head>
<title>CRM</title>
<link rel="stylesheet" href="style/style.css" type="text/css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$(".dragable").draggable({
cancel:"a.ui-icon",
revert:true,
helper:"clone",
cursor:"move",
revertDuration:0
});
$('.droppable').droppable({
accept: ".dragable",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
// clone item to retain in original "list"
var $item = ui.draggable.clone();
$(this).addClass('has-drop').html($item);
}
});
});
</script>
</head>
<body>
<div class="main-container">
<div class="wrapper">
<div class="tb-head">
<div class="target">
<span class="target-span">Target</span>
</div>
<div class="user1">
<span class="user1-span">User1</span>
</div>
<div class="user2">
<span class="user2-span">User2</span>
</div>
<div class="user3">
<span class="user3-span">User3</span>
</div>
<div class="user4">
<span class="user4-span">User4</span>
</div>
<div class="clear"></div>
</div>
<div class="tb-body">
<div class="inner-target">
<div class="dragable">
<span class="targetinn-span">Target Lead</span>
</div>
<div class="dragable">
<span class="targetinn-span">Assign1 Lead</span>
</div>
<div class="dragable">
<span class="targetinn-span">Assign2 Lead</span>
</div>
<div class="dragable">
<span class="targetinn-span">Assign3 Lead</span>
</div>
</div>
<div class="inner-user1">
<div class="droppable">
<span class="user1inn-span"></span>
</div>
</div>
<div class="inner-user2">
<div class="droppable">
<span class="user2inn-span"></span>
</div>
</div>
<div class="inner-user3">
<div class="droppable">
<span class="user3inn-span"></span>
</div>
</div>
<div class="inner-user4">
<div class="droppable">
<span class="user4inn-span"></span>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
Just change this line of code
$(this).addClass('has-drop').html($item);
to this
$(this).addClass('has-drop').append($item);
By calling .html() you replaced the original html just with last dropped element.
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.
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>
So I layed out my entire site with HTML and CSS. I then did some javascript, namely to handle some tab switching. Everything was working great. When I went to wire up the data, rather than putting my entire site in a polymer element, I put an auto-binding template around the bulk of the HTML then just used smaller elements within. The data is all working great, but now that javascript stopped working.
When you look at the DOM it looks a bit off, I'm not very familiar with how the shadow-dom works, so I don't know if this is right, but within #document-fragment I see an exact duplicate of everything I see after #document-fragment (ie "top", "middle", "tabs", etc)
Here is the relevant javascript and the full HTML:
$('.tab').on('click', function() {
$('.tab').removeClass('selected');
$('.content').hide();
$(this).addClass('selected');
var t = $(this).html();
$('.' + t).show();
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/core-ajax/core-ajax.html">
<link rel="import" href="elements/air-appName.html">
<link rel="import" href="elements/air-appPropertyList.html">
</head>
<body>
<div id="main">
<template is="auto-binding">
<core-ajax auto handleAs="json" url="app.json" response="{{app}}"></core-ajax>
<div id="top">
<img id="imgLogo" src="images/app_AIR.png">
<div id="itemHeader">
<img id="imgDataQuality" src="images/DataQuality0.png">
<air-appName id="lblTitle" name="{{app.name}}">Loading</air-appName>
</div>
</div>
<div id="middle">
<div id="left">
<input id="txtSearch" type="text">
<img id="btnSearch" src="images/btnSearch.gif">
<air-appPropertyList id="appProperties" props="{{app.props}}"></air-appPropertyList>
</div>
<div id="right">
<div id="tabContent">
<!--TODO: Tabs need to be more dynamic-->
<div id="tabs">
<span class="tab">General</span>
<span class="tab">Technical</span>
<span class="tab">Contacts</span>
<span class="tab">Links</span>
<span class="tab">Desktop</span>
</div>
<div class="content General">
This is the general tab
</div>
<div class="content Technical">
<table-servers serversUrl="{{app.associatedServers}}"></table-servers>
</div>
<div class="content Contacts">
This is the Contacts tab
</div>
<div class="content Links">
This is the links tab
</div>
<div class="content Desktop">
This is the desktop tab
</div>
</div>
</div>
</div>
<div id="bottom">
<div id="itemFooter">
</div>
</div>
</template>
</div>
<script src="scripts/vendor/jquery-1.11.1.min.js"></script>
<script src="scripts/vars.js"></script>
<script src="scripts/functions.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/ready.js"></script>
</body>
</html>