We Keep Coding

Want horizontal scroll in mouse wheel scrolling Nuxt js

Here is my simple HTML markup style. So, when I am using the mouse wheel I want to scroll the content horizontally.
`
<div class="col-md-9" style="max-height: 80vh;overflow-y: hidden" id="scroll_container">
<div class="container-fluid" >
<div class="row flex-row flex-nowrap">
<div class="col-md-4">
Card 1
</div>
<div class="col-md-4 mb-4" >
Card 2
</div>
<div class="col-md-4">
Card 3
</div>
<div class="col-md-4">
Card 4
</div>
</div>
</div>
</div>
`

Here's what I did to make it little more "Vue". I set a ref on the HTML element I want to scroll as well as a #mousewheel event. Then in the triggered method, I reference the element by $ref and pretty much do what OP did with the .scrollLeft += e.deltaY.
Here's what it looks like:
<div ref="scroll_container" #mousewheel="scrollX">
...
</div>
...
methods: {
scrollX(e) {
this.$refs['scroll_container'].scrollLeft += e.deltaY;
},
},

I need to add an event listener in vue created life cycle.
document.addEventListener('wheel', (e) => {
document.getElementById('scroll_container').scrollLeft += e.deltaY;
})

Adding slide in specified section when in mobile device (Using Fullpage JS)

Good day. So, i have this script:
<section class="section">
<div class="row text-center profilmain">
<div class="portofoliogallery col-12 col-sm-6 col-md-4 col-lg-4">
1
</div>
<div class="portofoliogallery col-12 col-sm-6 col-md-4 col-lg-4">
2
</div>
</div>
</section>
so normally it will make two coloumns right ? now i want to make a condition if it in mobile device it will show one coloumn only
if($(window).width() < 600){
$('.portofoliogallery').addClass('slidesection');
var $this = $('.portofoliogallery').first();
$this.parent('.row').addClass('flex-row flex-nowrap');
}
});
then i want to add slide from fullpage js https://alvarotrigo.com/fullPage/#secondPage . i change my script to this
if($(window).width() < 600){
$('.portofoliogallery').addClass('slidesection');
var $this = $('.portofoliogallery').first();
$this.parent('.row').addClass('flex-row flex-nowrap');
alert($('.portofoliogallery').hasClass('slidesection'));
}
});
Now i'm done adding .slidesection to my '.portofoliogallery', but the problem is my slide is not working. I can't slide it and i already change my slideselector to this slideSelector:'.slidesection'. so what did i miss ? sorry bad english

You'll have to destroy and initialise fullPage.js again so it can recognise the new slide.
Check out my answer in this post.

How to get all strings and replace it with another from the database JavaScript

I apologize in advance for being weak English :(
My website looks like this:
https://scr.hu/LoDJpD
<div class="container-fluid">
<div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1 text-center">
<div class="card col-md-6 col-sm-6 row-2">
<div class="card-bg">
<div class="image" style="background-image: url('kwadrat.jpg');"></div>
<div class="title"><h1><hr>DNI OTWARTE<hr></h1></div>
<div id="big" class="text">#string/big</div>
</div>
</div>
<div class="card col-md-3 col-sm-3 row-2">
<div class="card-bg">
<div class="image" style="background-image: url('dlugi.jpg');"></div>
<div class="title"><h1><hr>PROJEKTY<br>UNIJNE<hr></h1></div>
<div id="small1" class="text">#string/small1</div>
</div>
</div>
<div class="card col-md-3 col-sm-3 row-2">
<div class="card-bg">
<div class="image" style="background-image: url('maly1.jpg');"></div>
<div class="title"><h1><hr>BUSINESS<br>ENGLISH<hr></h1></div>
<div id="small2" class="text">#string/small2</div>
</div>
</div>
<div class="card col-md-12 row-1">
<div class="card-bg">
<div class="image" style="background-image: url('banner.jpg');"></div>
<div class="title"><h1><hr>CZECHOMANIA<hr></h1></div>
<div id="bigwidth" class="text">#string/bigwidth</div>
</div>
</div>
</div>
</div>
I would like to convert the "#string/text" text to a variable from the database.
In the database, the variable also has the name "#string/text".
Right now I have a simple script, but I know it will be ineffective
text = document.getElementById("big").innerHTML;
lang = document.getElementById("jezyk");
function en(){
document.getElementById("jezyk").className="flag flag-gb";
}
function pl(){
document.getElementById("jezyk").className="flag flag-pl";
}
function useen(){
if(lang.className == "flag flag-gb" && text == "#string/big"){
document.getElementById("big").innerHTML="GB variable form database";
}
}
function usepl(){
if(lang.className == "flag flag-pl" && text == "#string/big"){
document.getElementById("big").innerHTML="PL variable form database";
}
}
setInterval(function jezyk(){
usepl();
useen();
jezyk();
}, 10);
Is there an easier way to retrieve text and replace it from the database?
Can somebody suggest some better and faster functions?

Use an object ( maybe retrieve it from server via JSON), like this:
var translate={
lang:["en","pl"],
values:{
curr_lang:["english","polish"],
info:["english text","polish text"]
}
};
So you can easily display a language chooser:
translate.lang.map(function(language){
var button=document.createElement("button");
button.textContent=language;
button.onclick=changeLanguage.bind(this,language);
document.body/* or a custom element*/.appendChild(button);
});
Traversing the whole dom is not that fast, so may just do it once, and replace all #identifier# with spans (may do this on serverside already and cache it):
document.body.innerHTML=document.body.innerHTML.split("#").reduce(function(part,i){
if(part%2===0) return part;
return "<span id='"+part+"' class='replace'>...</span>";
}).join("");
So the actual replacing is quite easy:
function changeLanguage(lang){
var index=translate.lang.indexOf(lang);
document.querySelectorAll(".replace").forEach(fumction(el){
var select=el.id;
el.textContent=(translate.values[select]||["error","error"])[index];
});
}
A sample text
This site is currently in #curr_lang# ...

The good way
Use some javascript frame work as Angular or React. It'll take some time to learn, but will be nice for you.
I'm not understanding what you want to do on this page, will those texts change frequently? Use setInterval will freeze your page, don't use it.

AngularJS - JQuery News Ticker - After moving news the javascript function doesn't get called

This is an awkward problem, which will be better explained by looking at the live demo. Basically I have a news box populated with ng-repeat using Angular. Then I am using a jquery plugin called news ticker which allows the news headlines to move around. The first time you land on the page the news items are in their proper spots and they call the function accordingly. After moving them up or down, they stop calling the function, set a breakpoint in the code and after moving the breakpoint is never hit.
Edit - After researching this further I have found that it is because the elements need to be compiled using $compile after they're re added. However following some examples I have not gotten this to work. I need a way of compiling after a move event with this plugin.
Live demo
Angular Script for with function that should be called.
$scope.UpdateNews = function (item,number) {
console.log(item + ' ' + number);
switch (item)
{
case 'General':
$scope.NewsCast.General.Body = $scope.News.GeneralNews[number].Text;
break;
}
};
What the HTML looks like with the news boxes
<script src="http://www.jqueryscript.net/demo/Responsive-jQuery-News-Ticker-Plugin-with-Bootstrap-3-Bootstrap-News-Box/scripts/jquery.bootstrap.newsbox.min.js" type="text/javascript"></script>
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="panel panel-default">
<div class="panel-heading"> <span class="glyphicon glyphicon-list-alt logo-inverse pull-left"></span><b> General News</b></div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<ul class="demo1" style="overflow-y: hidden; height: 280px;" ng-model="Idk">
<li style="" class="news-item text-left" ng-repeat="item in News.GeneralNews"><strong>{{item.DateValue | date: "MMM dd yyyy"}}</strong> {{item.Preview}}<a class="FakeClickable" ng-click="UpdateNews('General',item.index)" data-target="#GeneralModal" data-toggle="modal">Read more...</a></li>
</ul>
<div ng-if="Width>768">
<div ng-include="'../pages/Modals/General/GENERAL_INLINE.html'"></div>
</div>
</div>
</div>
</div>
<div class="panel-footer"> </div>
</div>
</div>

display a webpage in to 3 vertical sections with ability to move and stretch the menus

I am creating a web page with 3 vertical templates. I used bootstrap grids and the grids are fixed but I want to strech them .Is there any way to do in Angular js and bootstrap.
Here is my code:
<body ng-controller="MenuController as menuCtrl">
<div class="row no-gutter">
<div class=" col-lg-3 mainmenu">
<h1> main menu </h1>
</div>
<div class="col-lg-3 secondmenu">
<h1> second menu </h1>
</div>
<div class="col-lg-6 thirdmenu">
<h1> detailed view </h1>
</div>
</div>
</body>
here is my css file is:
.row.no-gutter [class*='col-']:not(:first-child),.row.no-gutter [class*='col-']:not(:last-child) {
padding-right:0;
padding-left:0;
}
/* only for column content visible */
.col-lg-1>div {
background-color:#ddd;
}