I have different boxes with different id
<div id="49" align="center" class="feed_box_id"></div>
<div id="50" align="center" class="feed_box_id"></div>
<div id="51" align="center" class="feed_box_id"></div>
i want to scroll a next id whenever the same button is clicked.
I tried
scrollTop
scrollTo
window.location.href
But couldn't find a way out.
if you want, here is my fuzzy code
var id_down = parseInt($(".feed_box_id").attr("id")) - 1;
$("#feed_down").click(function() {
window.location.href = "#" + id_down;
});
var id_up = parseInt($(".feed_box_id").attr("id")) + 1;
$("#feed_up").click(function() {
window.location.href = "#" + id_up;
});
Maintain a variable that keeps the track of the last clicked id.
var lastclicked={id:49};
$("#feed_up").click(lastclicked, function(e) {
if($("#" + (e.data.id+1)).length>0)
{
window.location.href = "#" + (e.data.id+1);
e.data.id++;
}
});
$("#feed_down").click(lastclicked, function(e) {
if($("#" + (e.data.id-1)).length>0)
{
window.location.href = "#" + (e.data.id-1);
e.data.id--;
}
});
Okay, you can create the fiddle by yourself.
HTML:
<button id="feed_down">feed_down</button>
<button id="feed_up">feed_up</button>
JS:
for(var i=0;i<100;i++)
{
$('<div id="' + (i) + '" align="center" class="feed_box_id">'+ (i) +'</div>').appendTo($('body'));
}
var lastclicked={id:49};
$("#feed_up").click(lastclicked, function(e) {
if($("#" + (e.data.id+1)).length>0)
{
window.location.href = "#" + (e.data.id+1);
e.data.id++;
}
});
$("#feed_down").click(lastclicked, function(e) {
if($("#" + (e.data.id-1)).length>0)
{
window.location.href = "#" + (e.data.id-1);
e.data.id--;
}
});
CSS:
#feed_down
{
position:fixed;
top:0;
right:0
}
#feed_up
{
position:fixed;
top:0;
right:100px
}
There are 2 ways: using only class without ids, using ids and no class is needed.
Class only:
var elementIndex = 0, elements = document.getElementsByClassName('myClass');
var scrollToElement = function(element){
window.scrollTo(0, element.getBoundingClientRect().top);
};
var nextElement = function(){
if(++elementIndex >= elements.length)
elementIndex = 0;
scrollToElement(elements[elementIndex]);
};
var previousElement = function(){
if(--elementIndex < 0)
elementIndex = elements.length - 1;
scrollToElement(elements[elementIndex]);
};
Id only (may be not only numbers):
var elementIndex = 0, elements = ['id1', 'myDog', 'last'];
var scrollToElement = function(element){
window.scrollTo(0, element.getBoundingClientRect().top);
};
var nextElement = function(){
if(++elementIndex >= elements.length)
elementIndex = 0;
scrollToElement(document.getElementById(elements[elementIndex]));
};
var previousElement = function(){
if(--elementIndex < 0)
elementIndex = elements.length - 1;
scrollToElement(document.getElementById(elements[elementIndex]));
};
Related
I have a container where I dynamically add sections, I create items inside the section , that should be sortable, But Jquery sortable does not work inside dynamically created containers, while if I give the containers static it works,
Can anyone please share a solution.Thanks
https://jsfiddle.net/anubala/7ut5wk3j/1/
HTML:
<div class='row page-layout'>
<div class='col-md-10 col-md-offset-1' >
<div class="add_section_div">
<p>Add section</p>
</div>
<div id="contents">
</div>
</div>
</div>
JavaScript:
$(".wrap_body").sortable();
$(".add_section_div").on("click", function() {
var $section = "<div class='section_div'><div class='div_header clearfix'><p class='pull-left'>Add Wrap</p></div><div class='section_body div_body'></div></div>";
$("#contents").append($section);
})
$("body").on("click", ".section_div>.div_header", function() {
var $wrap = "<div class='wrap_div'><div class='div_header clearfix'><p class='pull-left'>Add Item</p></div><div class='wrap_body div_body clearfix'></div></div>";
$(this).parent().find('.section_body').append($wrap);
})
const regex = /^.*-\s*(.*)$/;
$("body").on("click", ".wrap_div>.div_header", function() {
var $item1 = "<div class='drag col-sm-";
var $item2 = "'><div class='item_div'><div class='div_header clearfix'><p class='pull-left'><span class='minus'><i class='fa fa-minus'></i></span><span class='plus'><i class='fa fa-plus'></i></span></p><p class='pull-left header_text'>";
var $item3 = "</p></div><div class='div_body'></div></div></div>";
var length_item = $(this).parent().find(".wrap_body .item_div").length;
var count = 0;
for (i = 0; i < length_item; i++) {
if ($(this).parent().find(".wrap_body>div:eq('" + i + "')")) {
console.log($(this).parent().find(".wrap_body>div:eq('" + i + "')"))
var col_count_text = $(this).parent().find(".wrap_body>div:eq('" + i + "')").attr('class');
count += parseInt(find_col_count(col_count_text));
}
}
var current_col_count = 12 - (count % 12);
if (count < 12) {
$(this).parent().find('.wrap_body').append($item1 + current_col_count + $item2 + "col-sm-" + current_col_count + $item3);
}
})
function find_col_count(col_text) {
var col_count = regex.exec(col_text);
col_count.forEach((match, groupIndex) => {
count1 = match;
});
return count1;
}
$("body").on("click", ".plus", function() {
var $parent = $(this).parent().parent().parent().parent();
var col_count_text = $parent.attr('class');
var length_item = $parent.parent().find(".item_div").length;
var count = 0;
for (i = 0; i < length_item; i++) {
if ($parent.parent().find(".item_div:eq('" + i + "')").parent()) {
var col_count_text = $parent.parent().find(".item_div:eq('" + i + "')").parent().attr('class');
count += parseInt(find_col_count(col_count_text));
}
}
var col_count_text = $parent.attr('class');
var col_count = find_col_count(col_count_text);
if (count < 12) {
var col_count_new = "col-sm-" + (++col_count);
var col_count_drag = "drag " + col_count_new;
$parent.attr("class", col_count_drag);
$parent.find(".header_text").html(col_count_new);
}
});
$("body").on("click", ".minus", function() {
var $parent = $(this).parent().parent().parent().parent();
var col_count_text = $parent.attr('class');
var col_count = find_col_count(col_count_text);
if (col_count > 1) {
var col_count_new = "col-sm-" + (--col_count);
var col_count_drag = "drag " + col_count_new;
$parent.attr("class", col_count_drag);
$parent.find(".header_text").html(col_count_new);
}
});
You probably may have found the solution already but to solve this issue you only need to move this line
$(".wrap_body").sortable();
To where you actually append the .wrapper_body to the body as following:
$("body").on("click", ".section_div>.div_header", function() {
var $wrap = "<div class='wrap_div'><div class='div_header clearfix'><p class='pull-left'>Add Item</p></div><div class='wrap_body div_body clearfix'></div></div>";
$(this).parent().find('.section_body').append($wrap);
$(".wrap_body").sortable();
});
This should solve your problem. See JsFiddle
I'm looking to change this script so that the animation starts once the page has loaded instead of when the div is clicked on.
Any suggestions on how I could do this would be much appreciated.
Here is the JS
$(document).ready(function() {
$(".marqueeElement").last().addClass("last");
$(".mholder").each(function() {
var i = 0;
$(this).find(".marqueeElement").each(function() {
var $this = $(this);
$this.css("top", i);
i += $this.height();
});
});
$('.mholder').click(function() {
var countScrolls = $('.mholder .marqueeElement').length;
for (var i=0; i < countScrolls; i++) {
doScroll($('.mholder .marqueeElement:nth-child(' + i + ')'));
}
});
});
function doScroll($ele) {
var top = parseInt($ele.css("top"));
if (top < -60) { //bit arbitrary!
var $lastEle = $ele.closest('.mholder').find(".last");
$lastEle.removeClass("last");
$ele.addClass("last");
var top = (parseInt($lastEle.css("top")) + $lastEle.height());
$ele.css("top", top);
}
$ele.animate({
top: (parseInt(top) - 60)
}, 80, 'linear', function() {
doScroll($(this))
});
}
Just move the code inside the .ready() event.
$(document).ready(function() {
$(".marqueeElement").last().addClass("last");
$(".mholder").each(function() {
var i = 0;
$(this).find(".marqueeElement").each(function() {
var $this = $(this);
$this.css("top", i);
i += $this.height();
});
});
var countScrolls = $('.mholder .marqueeElement').length;
for (var i=0; i < countScrolls; i++) {
doScroll($('.mholder .marqueeElement:nth-child(' + i + ')'));
}
});
Assuming '.mholder' is the selector for your div, just get rid of the click handler - i.e. change from:
$('.mholder').click(function() {
var countScrolls = $('.mholder .marqueeElement').length;
for (var i=0; i < countScrolls; i++) {
doScroll($('.mholder .marqueeElement:nth-child(' + i + ')'));
}
});
to
var countScrolls = $('.mholder .marqueeElement').length;
for (var i=0; i < countScrolls; i++) {
doScroll($('.mholder .marqueeElement:nth-child(' + i + ')'));
}
the most easiest way is to put at the end of the on ready function the following (after you bind the click event):
$('.mholder').click()
I'm relatively new to JavaScript & jQuery. I'm trying out some code for an image slider which works fine on an image click event. However, I want it to run all by itself after the document loads. How can I achieve this? I tried to place the code inside $(document).ready() but it doesn't work that way. Here's my code:
<script>
var total = 4;
var present = 1;
var next = 2;
$(document).ready(function () {
$("#right").click(function () {
present_slide = "#slide" + present;
next_slide = "#slide" + next;
$(present_slide).css("top", "200px");
$(next_slide).css("top", "0px");
present++;
next++;
if (present == (total + 1)) {
present = 1;
next = 2;
for (i = 1; i <= 4; i++) {
$("#slide" + i).css("top", "200px");
}
$("#slide1").css("top", "0px");
}
});
});
</script>
Here - #right is the id associated with an img element. #slide1, #slide2, etc are the ids associated with the divs that hold multiple images.
$(document).ready(function (){
$( "#right" ).trigger( "click" );
});
try to replace $(document).ready() by $(window).onload = function(){ ... }
Either remove the $("#right").click(function () { or add $('#right').trigger('click').
var total = 4;
var present = 1;
var next = 2;
$(document).ready(function () {
present_slide = "#slide" + present;
next_slide = "#slide" + next;
$(present_slide).css("top", "200px");
$(next_slide).css("top", "0px");
present++;
next++;
if (present == (total + 1)) {
present = 1;
next = 2;
for (i = 1; i <= 4; i++) {
$("#slide" + i).css("top", "200px");
}
$("#slide1").css("top", "0px");
}
});
Or
var total = 4;
var present = 1;
var next = 2;
$(document).ready(function () {
$("#right").click(function () {
present_slide = "#slide" + present;
next_slide = "#slide" + next;
$(present_slide).css("top", "200px");
$(next_slide).css("top", "0px");
present++;
next++;
if (present == (total + 1)) {
present = 1;
next = 2;
for (i = 1; i <= 4; i++) {
$("#slide" + i).css("top", "200px");
}
$("#slide1").css("top", "0px");
}
}).trigger('click');
});
You can manually trigger the `click' event for the image when the window loads by
$(window).load(function() {
$("#right").trigger('click');
}
This would trigger the click once all the resources are loaded.
At the bottom of your script block, place this line:
$("#right").trigger('click');
I've wrote this so it changes the href of the anchor with the class name but I also would like it to change the target, how do I add this?
window.onload = function() {
var change = document.getElementsByTagName('a');
for (var i = 0; i < change.length; i++) {
if (change[i].className.match('(^|\\s+)classnamegoeshere(\\s+|$)')) {
change[i].href = "/urlgoeshere";
break;
}
}
}
change[i].setAttribute('target', '_blank');
Try this
window.onload = function() {
var change = document.getElementsByTagName('a');
for (var i = 0, j =change.length; i < j ; i++) {
if ((' ' + change[i].className + ' ').indexOf(' ' + "smeCls" + ' ') > -1) {
change[i].href = "http://www.google.com";
}
}
}
I have a list of links in a UL. Can someone give me an example of how to detect what the index is of the link that was clicked, then add one class to all the links in LIs before the selected link and a different class to all the links in LIs after the selected link?
var ul = document.getElementById('your-ul'),
li = ul.getElementsByTagName('li');
var iterateLi = function(fn) {
for (var i = 0, length = li.length; i < length; i++) {
fn.call(li[i], i);
}
};
iterateLi(function(index) {
var thisIndex = index,
thisLi = this;
this.onclick = function(index) {
iterateLi(function(index) {
var classes = ['before', 'selected', 'after'],
addClass;
if (index < thisIndex) {
addClass = classes[0];
} else if (index == thisIndex) {
addClass = classes[1];
} else {
addClass = classes[2];
}
for (var i = 0, length = classes.length; i < length; i++) {
}
var className = this.className;
if (className) {
var regex = new RegExp('(?:' + classes.join('|') + ')', 'g');
className = className.replace(regex, '');
console.log(regex, className)
}
this.className = className + ' ' + addClass;
});
};
});
jsFiddle.