I'm really a beginner in ajax/jquery. I need to open a link in a new window like "target=_blank" but my code only makes the link to open in the same window. I have tried different things like inserting target _blank inside the jquery but it didn't work at all. I really appreciate any help [:)
function initHeroSwitch() {
var heroCnt = $('#hero ul li').size();
if ($('#hero').length > 0) {
$('#hero').append('<div id="hero-btns"></div>');
$('#hero ul li').each(function (index) {
$('#hero-btns').append(''); });
$('#hero ul li').each(function () {
getRel = $(this).attr('rel');
winHeight = $(window).height();
if (winHeight > 750) {
var bkgImg = getRel.split('.');
bkgImg = bkgImg[0];
bkgImg = bkgImg.substr(0, bkgImg.length - 3);
bkgImg = bkgImg + "-lg.jpg";
$('#hero ul li').each(function () { preload(bkgImg); });
} else {
preload(getRel);
}
});
startHeroRotate();
rotateHero(rotateSpeed);
} else { autoRotate = window.setInterval(function () { startNewsRotation(); }, rotateSpeed); }
}
Hvae you tried this:
$('#hero-btns').append('');
Related
(function ($) {
var window = $(window),
one = $("#one"),
two = $("#two"),
three = $("#three"),
four = $("#four"),
oneT = one.offset().top,
twoT = two.offset().top,
threeT = three.offset().top,
fourT = four.offset().top;
function Scroll(div) {
var tp = $(div).offset().top;
$("html, body").animate({ scrollTop: tp }, 500);
}
var tmp = 0;
var mousewheelevt = /Firefox/i.test(navigator.userAgent)
? "DOMMouseScroll"
: "mousewheel";
$("section").bind(mousewheelevt, function (e) {
var evt = window.event || e;
evt = evt.originalEvent ? evt.originalEvent : evt;
var delta = evt.detail ? evt.detail * -40 : evt.wheelDelta;
console.log(delta);
if (delta < 0) {
tmp++;
if (tmp > 0) {
var divT = $(this).next();
Scroll(divT);
tmp = 0;
}
} else if (delta > 0) {
tmp--;
console.log("going up");
if (tmp < -1) {
var divT = $(this).prev();
Scroll(divT);
tmp = 0;
}
}
});
})(jQuery);
This is the code im using is there any problem , i am getting error called
index.html:100 Uncaught TypeError: Cannot read properties of undefined (reading 'top')
Can you please help me with this.
You likely do not have 4 sections in your HTML or you have divs with a class and you need a dot: $(".section")
Then you need to use the wheel event instead of your current deprecated code
jQuery messes things up and you need to then use the originalEvent
You do not actually use any of the vars you declared in the beginning
I also got rid of half the tests by testing the existence of next/prev
(function($) {
function Scroll($div) {
var tp = $div.offset().top;
$("html, body").animate({
scrollTop: tp
}, 500);
}
const $sections = $("section");
$sections.on("wheel", function(e) {
const delta = e.originalEvent.wheelDelta; // all newer browsers
const down = delta < 0;
let $divT = down ? $(this).next("section") : $(this).prev("section");
// we may get a next or previous that is undefined - not obvious
if (!$divT.attr("id") || $divT.length === 0) {
if (down) $divT = $sections.first();
else $divT = $sections.last();
}
Scroll($divT);
});
})(jQuery);
section {
height: 500px;
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<section id="one">One</section>
<section id="two">Two</section>
<section id="three">Three</section>
<section id="four">Four</section>
I have created a simple accordion for some footer content that I only want to trigger when the window width is less than 600px. I've tried using window.resize but when resizing the window above 600px the function is still initialising and I can't understand why.
If anyone would mind sharing some advice on this I'd really appreciate it. I keep going round in circles.
jsFiddle
JS:
function initializeAccordion() {
var mainToggle = $('.footer-accordion > .footer-column > p');
$('.footer-accordion > .footer-column > .menu').css('display', 'none');
mainToggle.click(function() {
var that = $(this);
var secondLevel = $(this).siblings('.menu');
var allSeconds = $('.footer-accordion > .footer-column > .menu');
if (that.hasClass('is-active')) {
secondLevel.slideUp();
that.removeClass('is-active');
mainToggle.removeClass('is-active');
allSeconds.removeClass('is-active');
allSeconds.slideUp();
} else {
mainToggle.removeClass('is-active');
allSeconds.removeClass('is-active');
allSeconds.slideUp();
secondLevel.slideDown();
that.addClass('is-active');
secondLevel.addClass('is-active');
}
});
};
if ($(window).width() < 600) {
initializeAccordion();
}
$(window).on('resize', function() {
if ($(window).width() < 600) {
initializeAccordion();
}
});
A pure JS cross-browser solution:
window.onresize = function() {
checkWidth();
}
checkWidth();
function checkWidth() {
var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
if (vw < 600) {
//callFunction();
}
}
I want to make a sidebar like gool
e play store..When i scroll left side in the body then the sidebar should appear...
Is there any idea to make such a sidebar?
For js.
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6 && $('#sidebar').offset()!=null) {
var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('margin-top').replace(/auto/, 0));
var height = $('#sidebar').height();
var footerTop = $('#footer').offset().top - parseFloat($('#footer').css('margin-top').replace(/auto/, 0));
var gap = 15;
scrollingSideBar(top,height,footerTop,gap);
$(window).resize(function (event) {
scrollingSideBar(top,height,footerTop,gap);
});
$(window).scroll(function (event) {
scrollingSideBar(top,height,footerTop,gap);
});
}
});
function scrollingSideBar(top,height,footerTop,gap){
var winHeight = $(window).height();
var winWidth = $(window).width();
var y = $(this).scrollTop();
var x = $(this).scrollLeft();
if (height+top+gap < winHeight) {
$('#sidebar').css({ position: "fixed",top: top, left:-x});
} else if(y+winHeight > height+top+gap){
$('#sidebar').css({position: "fixed",top: winHeight-height-gap, left:-x});
} else if (y+winHeight > footerTop) {
$('#sidebar').css({position: "fixed",top: footerTop-height-y-gap, left:-x});
} else {
$('#sidebar').css({position: "absolute",top: top, left:-x/winWidth});
}
}
For CSS you just right click on browser and inspect it.
I have the following code which works to create the div on click, but I would like the div to slide down slowly and not appear immediately:
function hideshow(which) {
if (!document.getElementById) return
if (which.style.display == "none") which.style.display = "block"
else which.style.display = "none"
I've found some code that appears to do what I'm after, but I'm having difficulty integrating it into my existing code (above):
$(document).ready(function() {
$("#button").toggle(function() {
$(this).text('Hide');
}, function() {
$(this).text('show');
}).click(function(){
$("#hidden_content").slideToggle("slow");
});
I've stuck it on js fiddle if that helps (with supporting css):
http://jsfiddle.net/dRpWv/479/ and
http://jsfiddle.net/dRpWv/447/
Use jquery property "slideDown"
My Codepen
function hideshow() {
var i = 1;
if (document.getElementById('effet').style.display == "none") {
$('#effet').slideDown("normal");
document.getElementById('effet').style.display = "block";
i = 2;
} else {
if (i == 1) {
$('#effet').slideUp("normal", function () {
document.getElementById('effet').style.display = "none";
});
}
}
}
I have a button called add to profile, all I need to know is how do I make it so its only on the last jQuery div, after the last next.
Like question 1, then next, question 2 back and next, question 3, back and add button.
So if you can really help me out here quick I'd really appreciate it.
Here's my code:
<script>
$(document).ready(function () {
var oldOption;
var counter = 1;
var maxThings = 4;
var minThings = 1;
$("#2").hide();
$("#3").hide();
$("#4").hide();
$('#back').hide();
$("#forward").click(function () {
$("#1").hide();
$("#2").hide();
$("#3").hide();
$("#4").hide();
if (!(counter >= maxThings)) {
counter++;
}
$("#" + counter).show();
$('#back').show();
if (counter === maxThings) {
$('#forward').hide();
}
});
$("#back").click(function () {
$("#1").hide();
$("#2").hide();
$("#3").hide();
$("#4").hide();
if (!(counter <= 1)) {
counter--;
}
$("#" + counter).show();
$('#forward').show();
if (counter === minThings) {
$('#back').hide();
}
});
});
</script>
...
if (counter === maxThings) {
$('#forward').hide();
$("#AddToProfile").show();
} else {
$("#AddToProfile").hide();
}
...
And I really don't like youre coding :) You'll have to change code every time you'll add new div.
I would do something like that:
- Every div would have class question
- Every div's START visibility attribute would be defined in html (every div except first would have in style something like visibility:hidden)
<script>
$(document).ready(function () {
var oldOption;
var counter = 1;
var maxThings = 4;
var minThings = 1;
$('#back').hide();
$("#forward").click(function () {
$("div.question").hide();
if (!(counter >= maxThings)) {
counter++;
}
$("#" + counter).show();
$('#back').show();
if (counter === maxThings) {
$('#forward').hide();
}
});
$("#back").click(function () {
$("div.question").hide();
if (!(counter <= 1)) {
counter--;
}
$("#" + counter).show();
$('#forward').show();
if (counter === minThings) {
$('#back').hide();
}
});
});
</script>