If height more than 100px, change position [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have this code:
$(document).ready(function () {
if ($('.pi-img').height() > 100) {
$(this).css('top' , '30%');
console.log('yeah');
}
});
But it doesn't work.

You need to use .each() to loop through the .pi-img elements:
$(document).ready(function () {
$('.pi-img').each(function() {
if ($(this).height() > 100) {
$(this).css('top' , '30%');
console.log('yeah');
}
});
});

Related

Run JavaScript function immediately and in eventListener [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
I have a function which must be executed immediately then in an eventListener.
Here is how I run both:
function mediaBodyClass() {
var body = document.body;
if (window.innerWidth >= 992) {
body.classList.add('desktop');
body.classList.remove('mobile');
} else {
body.classList.add('mobile');
body.classList.remove('desktop');
}
};
mediaBodyClass(); // Now
// In the listener
window.addEventListener('resize', function() {
mediaBodyClass();
});
What is the best practice?
Whilst what you are doing is fine - you might find the matchMedia api useful - basically its a javascript version of a media query in which you can attach functions to given viewport widths and also listen for changes to the viewport size.
Here is a link to a useful article.https://css-tricks.com/working-with-javascript-media-queries/
const mediaQuery = window.matchMedia('(min-width: 992px)')
function handleViewportSizeChange(e) {
var body = document.body;
if (e.matches) {
body.classList.add('desktop');
body.classList.remove('mobile');
}else {
body.classList.add('mobile');
body.classList.remove('desktop');
}
}
// Register event listener
mediaQuery.addListener(handleViewportSizeChange)
// Initial check
handleViewportSizeChange(mediaQuery)
You can use a media query to apply styles to the body when the screen width is smaller than a certain limit, instead of using JavaScript:
body{
/* .desktop styles go here */
}
#media only screen and (max-width: 992px) {
body {
/* .mobile styles go here */
}
}

Chosing a random color from an array and implementing the result to an HTML div [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
so I have this loader animation div and I want it to change colour every time I refresh. I already have an array for the colours if needed: ["#c764b3", "#d55f5f", "5f92d5", "#6bd1aa", "#6fd55b", "#799b00", "#ce3434"] , but nothing seems to work, and I don't know why.
Thanks in advance.
let colors = ["#c764b3", "#d55f5f", "#5f92d5", "#6bd1aa", "#6fd55b", "#799b00", "#ce3434"];
onload = function() {
document.getElementById("color-div").style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
}
#color-div {
width: 100px;
height: 100px;
margin: auto;
border: 2px solid black;
border-radius: 5px;
}
<div id="color-div"></div>
This should do it!
`let colorArray = ["#c764b3", "#d55f5f", "5f92d5", "#6bd1aa", "#6fd55b", "#799b00", "#ce3434"];
let rc = Math.floor(Math.random() * colorArray.length);
console.log(rc);`

What js code to add here to get smooth scrolling? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
please check the below JS code, and suggest me further addition or modification in javascript -
JS :
var $tabs = $('.tabs > div'), _currhash, $currTab;
$tabs.first().addClass("active");
function showTab() {
if($currTab.length>0) {
$tabs.removeClass('active');
$currTab.addClass('active');
}
/* find the panels and 'unlink' the id to prevent page jump */
$tabs.each(function() {
var _id = $(this).attr('id');
$(this).attr('id',_id+'_tab');
/* eg we have given the tab an id of 'tab1_tab' */
}); /* set up an anchor 'watch' for the panels */
function anchorWatch() {
if(document.location.hash.length>0) {
/* only run if 'hash' has changed */
if(_currhash!==document.location.hash) {
_currhash = document.location.hash; /* we only want to match the unlinked id's */
$currTab = $(_currhash+'_tab');
showTab();
}
}
}
setInterval(anchorWatch,300);
jsfiddle not working so please check html and css link - readmore
You can try this in your showTab()
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);

Button in wrong place in meteor app [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I made a little app and my button shows only on one place. It's all working but on wrong place. See pictures. I'll leave my GitHub repo link. Sorry most of stuff is on Cyrillic but code is, of course, on English Latin.
Here is a video of my problem (22 sec)
Thank you for your help.
You're problem is with id. HTML ids are unique, so when you do document.getElementById('skocko'), you only get back the first element with that id.
Instead, give the button a class of skocko, and access it like this:
Template.myTemplate.events({
"click .glasaj":function(event, template){
template.$(".skocko").toggle();
}
}
This will select the element with class skocko in the current template.
SRC: https://stackoverflow.com/a/27116956/2317712
check div positioning How to position one element relative to another with jQuery? so its position can be relative to button clicked, or assign unique skocko id for every skocko..
Do something like this in your script glasaj.js
if (Meteor.isClient) {
Template.glasajDugme.events({
'click .glasaj': function(){
var g = Meteor.user().profile.неискоришћениГласови;
if (g < 1) {
var pos = $(this).position();
// .outerWidth() takes into account border and padding.
var width = $(this).outerWidth();
//show the menu directly over the placeholder
$("#skocko").css({
position: "absolute",
top: pos.top + "px",
left: (pos.left + width) + "px"
}).show();
document.getElementById('skocko').style.display = "inline-flex";
// return "disabled" ;
}
else {
Predlozi.update(this._id, {$inc: {Број_Гласова: 1}}
);
Meteor.users.update(Meteor.userId(), {$inc: {"profile.неискоришћениГласови": -1}}
);
};
}
});
sakrijskocka = function(){
document.getElementById('skocko').style.display = "none";
};
};

How to create animate header without jQuery [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I've used JavaScript just for this purpose but it only works when I refresh the browser ...
<script>
var scroll = window.scrollY ;
var header = document.getElementById("header");
function my(){
if (scroll >= header.scrollHeight) {
header.style.height = 100 +"px";
} else {header.style.height = 250 + "px";}
}
my();
</script>
You would need to add a scroll event listener :
var scroll, header = document.getElementById("header");
function my() {
scroll = window.scrollY;
if (scroll >= header.clientHeight) header.style.height = 100 + "px";
else header.style.height = 250 + "px";
}
window.addEventListener('scroll', my, false);
window.addEventListener('load', my, false);
Also added a listener that will respond to when the page has fully loaded, this will make sure the function executes when the user lands on the page and a scroll position was cached before...

Categories