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.
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 have a semantic-UI lefside menu that I want to be persistent. I am trying to make 2 states - a wide one with type for each item, and a compact one with an image for each item.
Currently there are a few issues that I am totally stumped on!
1) Why does the menu completely go away on click?
2) How can I make the page NOT do dim?
3) Can the page collapse in width instead of getting pushed to the right?
4) is it possible to have two menu states, as described, and toggle between them on click?
Thank you very much!
My site is here: http://itp.evejweinberg.com/left/
And my html:
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="semantic/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,800" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<!-- my json of content -->
<script type="text/javascript" src="list.js"></script>
<!-- jQuery to build that content -->
<script type="text/javascript" src="buildScene.js"></script>
<script src="semantic/semantic.min.js"></script>
</head>
<!--//do I need this class? -->
<body class="pushable">
<!-- semantic says to put everything in pusher -->
<div class="pusher">
<div class="all">
<div id="main"></div>
<div class="title-holder">
<div class="animatedDiv"></div>
</div>
<div class='container'>
<div class='header'></div>
<div class="all-books"></div>
</div>
</div>
</div>
<!-- menu -->
<div class="ui vertical left labeled menu fixed small sidebar">
<div class="header link item" onclick="scrollTo(captology)">Intro</div>
<div class="item">
<div class="header link item">Emotions</div>
<div class="menu">
<a class="item link" onclick="scrollTo(hope)">Hope</a>
<a class="item link" onclick="scrollTo(anxiety)">Anxiety</a>
<a class="item link" onclick="scrollTo(fear)">Fear</a>
</div>
</div>
<div class="item">
<div class="header link item">Psychology</div>
<div class="menu">
<a class="item link" onclick="scrollTo(transparency)">Transparency</a>
<a class="item link" onclick="scrollTo(loss)">Loss Aversion</a>
<a class="item link" onclick="scrollTo(dark)">Dark Patterns</a>
<a class="item link" onclick="scrollTo(social)">Social Pressure</a>
</div>
</div>
<div class="item">
<div class="header link" onclick="scrollTo(fogg)">Fogg</div>
<div class="menu">
<a class="item link" onclick="scrollTo(motivation)">Motivation</a>
<a class="item link" onclick="scrollTo(ability)">Ability</a>
<a class="item link" onclick="scrollTo(trigger)">Trigger</a>
</div>
</div>
<div class="item">
<div class="header link" onclick="scrollTo(flow)">Flow</div>
<div class="menu">
<a class="item link" onclick="scrollTo(chunking)">Chunking</a>
<!-- <a class="item">FAQs</a> -->
</div>
</div>
<div class="item">
<div class="header">Ethics</div>
<div class="menu">
<div class="nav-rect" id="e"></div>
<div class="nav-rect" id="e"></div>
<div class="nav-rect" id="e"></div>
<div class="nav-rect" id="e"></div>
</div>
<div class="header link" onclick="scrollTo(sources)">Sources</div>
</div>
<div class="header">About</div>
<div class="ui category search item">
<div class="ui transparent icon input">
<input class="prompt" type="text" placeholder="Search...">
<i class="search link icon"></i>
</div>
<div class="results"></div>
</div>
</div>
</div>
<script type="text/javascript" src="content.js"></script>
<script type="text/javascript" src="sketch.js"></script>
<script type="text/javascript" src="js/intro.js"></script>
<script type="text/javascript" src="js/hope.js"></script>
<script type="text/javascript" src="js/lossAversion.js"></script>
<script type="text/javascript">
$('.sidebar').sidebar('show');
// $('.sidebar')
// .visibility({
// type : 'fixed',
// offset : 45 // give some space from top of screen
// });
// $('.menu').click(function(){
// $('.ui.labeled.icon.sidebar').sidebar('toggle');
//
// })
// $('.ui.sidebar').click(function(){
// sidebar('toggle');
// })
</script>
</body>
</html>
Mystery solved! Semantic-UI was dynamically adding to my html on build. I removed the class 'sidebar' and all pusher and dimmer css went away. That solves #1 and #2. For the rest, i'm just going to go back to jQuery animations to slide the left nav to the left and collapse it's width. Thx All!
I want to change the innerHTML of each column in each row, but I cant get it to work properly.
var numOfRows = $('.wrap').children('.row').length;
for (var i = 0; i < numOfRows; i++) {
var $firstDiv = $(".input_fields_wrap .row:eq(0)");
$firstDiv.text("Works");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
</div>
How could I properly go about this and change the innerHTML of each column in each row?
You can use something like this, too:
$('.row').each(function(i) {
$(this).children().first().text('changed '+i);
});
Demo: https://jsfiddle.net/c1hcL26m/
Please do like bellow.
$( ".row div:first-child").text("Some text")
You can use :first-child selector
Selects all elements that are the first child of their parent.
To use index, You can use .text(function)/.html(function)
$('.wrap .row .col-md-4:first-child').text(function(i) {
return 'Changed Text: ' + (i+1);
});
$('.wrap .row .col-md-4:first-child').text(function(i) {
return 'Changed Text: ' + (i+1);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
</div>
javascript approach
document.querySelectorAll('.row div:first-child').forEach(function(r){r.innerHTML = "MYchangedtext"})
Try this out
$(".wrap .row .col-md-4:first-child").text("Hello world!");
UPDATE
I now understand OP's request is to change the content of the first column only. Using this selector pattern we are able to accurately target desired elements. The use of .each() allows us to iterate through each target and modify the content and give each one a unique number as well.
var firstCols = $('div > div > div:first-of-type')
This selector is saying:
Find the divs that are the first child div...
...of a div (mom) and that div must...
...have a div parent as well (grandma).
OLD
Each column of each row equates to all cells or with this Bootstrap layout it would mean all div.col-md-4. I noticed the "CHANGE" and "DONT CHANGE" pattern, is that what you really want instead?
$('.col-md-4').html('NEW CONTENT');
SNIPPET
var firstCols = $('div > div > div:first-of-type');
firstCols.each(function(idx, obj) {
$(this).html('ROW' + (idx + 1)).css('background', 'cyan');
});
<!DOCTYPE html>
<html lang="en">
<head>
<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.1.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">
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
</div>
</body>
</html>
Do a loop on your .row and find the first div and change the text. use the below logic
$(".wrap .row").each(function(i){
$(this).find('div:eq(0)').text("Changed "+ i );
});
Here is a working snippet
$(".wrap .row").each(function(i){
$(this).find('div:eq(0)').text("Changed "+ i );
$(this).find('div:eq(0)').css('background-color','yellow'); //demo purpose
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
</div>
I've this code
jQuery(function($) {
//After it toggle the content with this button
$('.content_toggle').hide();
$('.link-toggle').before('<i class="fa fa-caret-right"></i>');
$(".link-toggle").click(function() {
$(this).toggleClass('active');
$(this).next(".project .content_toggle").slideToggle("slow");
$('.project').find('i').toggleClass('fa-caret-right fa-caret-down');
});
//Let's the magic applies <3
});
i, h4 {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="project">
<h4 class="link-toggle">Link 1</h4>
<div id="" class="content_toggle">
<p>Hello world</p>
</div>
</div>
<div class="project">
<h4 class="link-toggle">Link 2</h4>
<div id="" class="content_toggle">
<p>Hello world</p>
</div>
</div>
It almost works, but when I click on a link, all the icons change.
I want that when I click on the first link for example, only its icon change.
The same thing when I click on the second link, only its icon change.
Thanks for you help !
Grab the current element with $(this) and navigate up to the parent with closest()
$(this).closest('.project').find('i').toggleClass('fa-caret-right fa-caret-down');
jQuery(function ($) {
//After it toggle the content with this button
$('.content_toggle').hide();
$('.link-toggle').before('<i class="fa fa-caret-right"></i>');
$(".link-toggle").click(function () {
$(this).toggleClass('active');
$(this).next(".project .content_toggle").slideToggle("slow");
$(this).closest('.project').find('i').toggleClass('fa-caret-right fa-caret-down');
});
//Let's the magic applies <3
});
i, h4 {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="project">
<h4 class="link-toggle">Link 1</h4>
<div id="" class="content_toggle"><p>Hello world</p></div>
</div>
<div class="project">
<h4 class="link-toggle">Link 2</h4>
<div id="" class="content_toggle"><p>Hello world</p></div>
</div>
You are toggling the class of all i, You need to toggle the class taking current element in context. So you can use .closest() to navigate to element with project class.
Use
$(this).closest('.project').find('i').toggleClass('fa-caret-right fa-caret-down');
instead of
$('.project').find('i').toggleClass('fa-caret-right fa-caret-down');
jQuery(function($) {
//After it toggle the content with this button
$('.content_toggle').hide();
$('.link-toggle').before('<i class="fa fa-caret-right"></i>');
$(".link-toggle").click(function() {
$(this).toggleClass('active');
$(this).next(".project .content_toggle").slideToggle("slow");
$(this).closest('.project').find('i').toggleClass('fa-caret-right fa-caret-down');
});
});
i,
h4 {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="project">
<h4 class="link-toggle">Link 1</h4>
<div id="" class="content_toggle">
<p>Hello world</p>
</div>
</div>
<div class="project">
<h4 class="link-toggle">Link 2</h4>
<div id="" class="content_toggle">
<p>Hello world</p>
</div>
</div>
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>