<div class="player-tab">
<div class="img-wrap" draggable="true">
<img src="assets/player.png" alt="">
</div>
<div class="img-wrap" draggable="true">
<img src="assets/player.png" alt="">
</div>
<div class="add-recording"> + Add Recording
</div>
</div>
In this code anyone can add recording and a player image show them after add. I want to img-wrap draggable to each other.
I means I upload 1 record and 2 record. I can sort it to 2nd first and 1st later. This way it's can be sorting in format as user want. Someone know any good idea to implement this feature.
You can use jQuery:
$(function() {
$( "#divid" ).draggable();
});
see this:http://jqueryui.com/draggable/
I think you want this:
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
check here:http://jqueryui.com/sortable/
Related
I am trying to create a headline news feed for my home page by using the Jquery .load function.
I am loading the page news.html and I can target the first elements (the latest news stories).
$( "#headline" ).load( "news.html .media-left:first, .media-body:first", function() {
$( "#headline" ).append("<a class='pull-right' href='news.html'>...Read more</a>");
});
but what I can't figure out is how to only pick up the div and the first two paragraphs within that div, so that I can create a read more button to take them to the main news.html, every time I try to reference a portion of the paragraphs, it only includes the paragraph and doesn't include the div media.body which has the styles attached to it.
<div class="media menu-center">
<div class="media-left">
<div class="donut-yellow">
<h4>
<span class="month">May</span>
<span class="day">23rd</span>
</h4>
</div>
</div>
<div class="media-body media-right ">
<p class="media-heading"><strong>e </strong></p>
<p>Welcome to the brand new ****!</p><p>To ensure that we continue to(...)</p>
<p>Take a look around the new layout and make sure to keep an eye on this(...)</p>
<span class="pull-right"><p class="bg-success"><strong>Paul</strong></p></span>
</div>
</div>
This selector seems to work:
$( "#headline" ).load( "news.html .media-body>p:nth-child(-n+2)", function() {
$( "#headline" ).append("<a class='pull-right' href='news.html'>...Read more</a>");
});
I've tested it in this Fiddle.
It returns:
e
Welcome to the brand new ****!
I have a site that aggregates video clips from YouTube. But sometimes a clip shows up as private. How can I set display:none; via jQuery on the whole div if the class a.colorbox.cboxElement contains the string "Private video"?
I have done something like this on single divs before that adda an extra class that I use to remove the div. I'm unsure what do to when it's nested:
$( "#div:contains('text')" ).addClass( "newclass" );
The HTML:
<li class="feed-item">
<div class="thumbnail-excerpt wprss-feed-thumbnail sgvtagged">
<div class="SGVthumb SGVthumb-0" data-title="SKateFlix" data-desc="The Amazing SkateFlix" data-type="yt" style="width:280px;height:210px;float:left;padding-right:px" data-media="SGVvideo" data-thumb="http://www.youtube.com/embed/2A7vCq8BmQQ" data-yid="2A7vCq8BmQQ" data-image="0" data-video="http://www.youtube.com/embed/2A7vCq8BmQQ?wmode=opaque&autoplay=1&rel=0"><img height="210" width="280" src="http://skateflix.se/wp-content/uploads/cache/remote/www-gstatic-com/3140846889.png"><img class="mpover" src="http://skateflix.se/wp-content/plugins/sgvideo/img/ytp.png" style="left:40px;top:40px"></div>
</div>
<div class="source-date"><span class="feed-source">VANS </span></div>
<a class="datum">onsdag, maj 6</a>
<a class="colorbox cboxElement" href="http://www.youtube.com/embed/2A7vCq8BmQQ">Private video</a>
<div class="colorboxexcerpt" href="http://www.youtube.com/embed/2A7vCq8BmQQ">...</div>
</li>
You can combine :has with :contains:
$( ".feed-item:has(a.cboxElement:contains('Private video'))" ).hide();
This example has one Private and one Public video:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/7vramkem/
I think you can remove the li ancestor of the anchor element
$( "a.cboxElement:contains('text')" ).closest('.feed-item').hide();
Demo: Fiddle
$('.feed-item').each(function(){
if($(this).find('.cboxElement').text() === "Private Video"){
$(this).addClass( "newclass" );
}
});
Unrelated to when or how you want to do the check, this if() should do the job
Here is a screenshot of what I'm trying to accomplish:
Here's a snippet of the html:
<section id="obstacles">
<div class="row">
<div class="large-3 columns">
<a href="#">
<div class="box inactive topBox" id="theTank">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
<div class="large-3 columns end">
<a href="#">
<div class="box inactive topBox rightBox" id="sundaeSlide">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
</div>
<div class="row">
<div class="large-3 columns">
<a href="#">
<div class="box inactive" id="hamster">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
<div class="large-3 columns end">
<a href="#">
<div class="box inactive rightBox" id="downTheHatch">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
</div>
<div class="row">
<div class="large-6 columns large-offset-6">
<img id="smallSlime" src="/assets/otherAssets/smallSlime.png">
</div>
</div>
<div class="row">
<div class="large-6 columns large-offset-6">
<a href="#">
<hgroup>
<h2>Down the Hatch</h2>
<h3>6ft Slide Covered in Gunk!</h3>
</hgroup>
</a>
</div>
</div>
</section>
And here's the jQuery I'm using to change the large picture that shows up on the right:
$(document).ready(function() {
$("#theTank").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/the-tank.png' />");
$(this).toggleClass('active inactive');
})
$("#sundaeSlide").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/sundae-slide.png' />");
$(this).toggleClass('active inactive');
})
$("#hamster").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/hamster-wheel.png' />");
$(this).toggleClass('active inactive');
})
$("#downTheHatch").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/down-the-hatch.png' />");
$(this).toggleClass('active inactive');
})
$("#pickIt").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/pick-it.png' />");
$(this).toggleClass('active inactive');
})
$("#theWringer").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/the-wringer.png' />");
$(this).toggleClass('active inactive');
})
})
Right now, when I click on the thumbnail image on the left, the background turns yellow and the correct large image displays on the right. However, when I click another image, the highlighted image remains highlighted. I am sure there is an easy fix to this, I'm just not confident of how to traverse the DOM to do what I want. Any help is greatly appreciated!
How about:
$(".active").toggleClass("active inactive");
Add this as the first line in your click functions.
$("#theTank, #anotherimg").click(function(event){
event.preventDefault();
var imgsrc = $(this).find('img').attr('src');
$('.largeObstacles').html("<img src='"+imgsrc+"' />");
$(this).toggleClass('active inactive');
});
Try this:
(function() {
var LMenuItems = $("a > .box");
var RMenuItem = $(".largeObstacles");
LMenuItems.foreach(function(MenuItem) {
MenuItem.onclick = function(event) {
event.preventDefault();
RMenuItem.html(MenuItem.childNodes[1]);
// Combined with Bill Read's answer -> Box class containing active class
$(".box > .active").toggleClass("active inactive");
}
});
}());
This method allows you to select all the menu items you have on the left menu by creating an array. Using .foreach allows you to iterate through the array and bind the click event to each menu object you have.
As others have mention. Your code makes it difficult because you are using individual event listeners for each element.
A good way to solve this would be to make your code more universal.
Adjusting for my lack of attention in seeing that the image source are different for small/large images.
First make you dom elements share a universal selector (.small-image)
And use a data-attribute on you element containing the large image src.
Note I used the same image for both just to make examples easier. Each data-imgsrc should have its respective image.
<div class="row">
<div class="large-3 columns">
<a href="#">
<div class="box inactive small-image" id="hamster" data-imgsrc="/assets/obstacles/the-tank.png">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
<div class="large-3 columns end">
<a href="#">
<div class="box inactive rightBox small-image" id="downTheHatch" data-imgsrc="/assets/obstacles/the-tank.png">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
</div>
Then with your javascript we can simple pull the data-imgsrc attribute from out clicked element and set it to the large container.
$('.small-image').on('click', function (ev) {
ev.preventDefault();
// remove any currently active small-images
$('.small-image.active').removeClass('active');
// make clicked active
$(this).addClass('active');
// Get the image src from the clicked elements data-imgsrc attribute
// and inject into large container
var imgText = '<img src="{img-src}" />';
var imgSrc = $(this).data('imgsrc');
$('.largeObstacles').html(imgText.replace('{img-src}', imgSrc);
});
This seems to be the best solution I've found:
("#obstacles .small-image").on('click', function(){
event.preventDefault();
var selector = '#'+$(this).attr('id');
var image = $(this).find('img').attr('data-attr-putItOver');
$(".small-image.active").removeClass('active').addClass('inactive');
$(selector).addClass('active');
$('.largeObstacles').html("<img src='"+image+"' />");
});
$('#minipics img').click(function(){
var url = $(this).attr('src');
$('#mainPic img').attr('src', url);
});
I have this little code for image gallery. I want to insert also jquery tabs under the gallery.
so I have HTML for it:
<div id="tabs">
<ul>
<li>პროდუქტის აღწერა</li>
<li>პრომო ვიდეო</li>
<li>მსგავსი პროდუქტი</li>
<li>კომენტარები (0)</li>
</ul>
<div id="tabs-1" class="ui-widget-content1">
<p>1</p>
</div>
<div id="tabs-2" class="ui-widget-content1">
<p>2</p>
</div>
<div id="tabs-3" class="ui-widget-content1">
<p>3</p>
</div>
<div id="tabs-4" class="ui-widget-content1">
<p>4</p>
</div>
</div>
also I'm inserting table ui.
when I'm inserting function:
$(function() {
$( "#tabs" ).tabs();
});
tabs work, but my gallery doesn't work. What may be a problem here?
this is gallery html:
<div id='mainPic'>
<img src="img/a1.png">
</div>
</div>
<div id='minipics'>
<img src="img/a1.png">
<img src="img/a2.png">
<img src="img/a3.png">
<img src="img/a4.png">
<img src="img/a5.png">
<img src="img/a6.png">
<img src="img/a7.png">
</div>
Not 100% sure if this is the solution but I'd recommend using a .on function instead of .click, only because I find them to work more frequently in my projects.
$('#minipics img').on( "click", function() {
var url = $(this).attr('src');
$('#mainPic img').attr('src', url);
});
I have a bit of a problem with jQuery UI Sortable and would need some help: I have the following html code:
<div class="sortable">
<div class="item">
<p>title1</p>
<div class="sort">sort 1</div>
</div>
<div class="item">
<p>title2</p>
<div class="sort">sort 2</div>
</div>
<div class="item">
<p>title3</p>
<div class="sort">sort 3</div>
</div>
</div>
There's a container with 3 divs. Each has a title and a defintion - the 3 definitions should be sortable, but the title above should always remain unchanged.
Here's the js:
$(".sortable").sortable({
items: ".sort"
});
If I specify in the sortable options to sort only the specified items, they are sorted, but taken out of the div structure I want - each inside one of the parent ".item" elements.
Here's a fiddle with the behaviour: http://jsfiddle.net/wPtjM/
Is there a way to achieve what I need with jQuery Sortable? All the examples I saw & tried lack such an outcome. Many thanks in advance!
Looking for something like this?
var dropped;
var titleDrop;
var titleChange;
$(function() {
$(".sortable").sortable({
items: ".sort",
stop: function( event, ui ) {
if(titleDrop != titleChange)
dropped.append(ui.item);
},
change: function(event, ui){
titleChange = ui.placeholder.parent().find('p').text();
}
});
$( ".item" ).droppable({
accept: ".sort",
drop: function( event, ui ) {
dropped = $(this);
titleDrop = $(this).find('p').text();
}
});
});
FIDDLE
Update
Incorporates switching places:
FIDDLE2