Öncelikle iki sorum var:
1) Sass'ı .vue dosyası içerisindeki <style></style> etiketleri arasında lang="scss" attribute u yardımıyla mı kullanmak istiyorsun.
2) Yoksa external file olarak .scss dosyası olarak mı tutmak istiyorsun?
Çözüm tavsiyelerim:
1 ) Vue Pre-Processors sayfasında yazana göre:
npm install -D sass-loader node-sass komutu ile yüklemelisin. Fakat sen node-sass değilde sass yüklemişsin. Ayrıca webpack config ini de yine aynı sayfada belirtildiği şekilde yaptığından emin ol.
2) .scss şeklinde sass yazıp, bunu kullandığın IDE deki bir extension veya 3rd party bir converter yardımıyla .css uzantısına dönüştürebilirsin. Örneğin ben VSCode da 'Live Sass Compiler' eklentisini kullanıyorum.
removeInput değişkeninin değeri sayfa yüklendiğinde tanımlanmış. Dolayısıyla yalnızca ekleme yapmadan önceki .removeInputlar seçili. Her ekleme yaptığında removeInput.on("click") fonksiyonundan önce removeInput değerini de güncellemelisin.
addInuput.on("click", function() {
inputContainer.append(newInput);
removeInput = $(".removeInput"); // Bu satırı ekle
removeInput.on("click", function (){
$(this).parent().parent().remove();
});
});
Not: removeInput.on("click") fonksiyonu addInput.on("click") fonksiyonunun içerisinde tanımlandığından. Sayfa sıfırdan yüklendiğinde henüz add işlemi gerçekleşmediğinden, mevcut sayfadaki inputlara remove işlemi uygulayamazsın. Uygulamak istersen ekstradan addInput.on("click") fonksiyonun dışına tekrardan bir remove işlemi gerçekleştirecek fonksiyon yazabilirsin.
Artık çoğu browser marquee kullanımını tavsiye etmiyor ( Bkz. The Marquee element )
Onun yerine aşağıdaki gibi alternatif çözümlere gitmek daha sağlıklı olacaktır.
Stackoverflow'dan alınan bir kod örneği.
PHP bilmiyorum ama include ile b.php dosyasını class a{} tanımlamasından önce çağırın.
Daha sonra class a{} nın içerisinde bb() fonksiyonunu çağırmayı deneyin.
Şöyle ki
<?php
include "b.php";
class a{
public function aa()
{
echo "hasan";
bb();
}
}
Dediğim gibi php bilmiyorum fakat bu işlemden sonra a class ından bir nesne türetmeniz lazım. O nesne üzerinden aa() fonksiyonunu çalıştırın ve çıktıyı kontrol edin.
Javascriptteki setInterval fonksiyonu yardımıyla her 4 saniyede bir revize ettiğim controlIndex fonksiyonu a = 1 ve clicked = false parametreleriyle çalışıyor. Sonuç olarak 4 saniyede bir sonraki slide gözüküyor.
Eğer kullanıcı tıklama işlemi yapmamışsa interval fonksiyonumuz çalışmaya devam ediyor. Fakat tıklama işlemi yapıldığında interval fonksiyonumuz clearlanıyor ve tekrar başlatılıyor.
var slideItem = document.getElementsByClassName('slideItem');
var slideIndex = 1;
slideControl(slideIndex);
var interval = setInterval(function(){ // xxx
controlIndex(1, false); // xxx
}, 4000); // xxx
function controlIndex(a, clicked = true) { // xxx
if(clicked){ // xxx
clearInterval(interval); // xxx
interval = setInterval(function(){ // xxx
controlIndex(1); // xxx
}, 4000); // xxx
} // xxx
slideIndex += a;
slideControl(slideIndex);
}
// gerisi senin kodunla aynı
( Eklediğim kısımlar belli olsun diye xxx yorumlarıyla belirttim. )
Öncelikle karşılaştığın sorunun neye dayandığını belirtmek isterim.
Hata 1) Overlay'i display block ile görünür kılmak istersen opacity sinden yararlanamazsın.
Hata 2) Overlay display block olduğunda img nin üzerine çıktığından artık img ye hover olmamış olunur ve sonsuz bir döngü başlar. ( tabi ::hover değerini img ye uyguladıysan )
Aşağıda çalışır bir örnek mevcut, iyi çalışmalar.
<div class="image-with-overlay">
<div class="overlay"></div>
<img src="https://picsum.photos/300/300" alt="Overlay image" widht="300" height="300">
</div>
.image-with-overlay {
position: relative;
width: 300px;
height: 300px;
}
.image-with-overlay .overlay {
position: absolute;
width: 100%;
height: 100%;
background: #0c0c0c;
opacity: 0;
transition: .5s opacity;
}
.image-with-overlay:hover .overlay {
opacity: .6;
}
Aslında bir şey yapmana gerek yok html de böyle yönlendirme yapabiliyorsun zaten
<a href="#target">Hedefe git</a>
// Bişeyler..
<section id="target">
<h1>Target</h1>
<p>Target burası</p>
</section>
Daha yumuşak geçiş istersen html { scroll-behavior: smooth } ekle.
Detay için
Hatta çok daha iyisi Tayfun Abi'nin Javascript Form Kontrolü + CSS ile Kolay Yöntemi videosunu izlemeni tavsiye ederim. Tabi buradaki kontroller UX açısından yararlı olsa da kullanıcılar tarafından erişebilir durumda, dolayısıyla değiştirilerek bu kontroller atlanabilir. Bu yüzden backend kontrolünü de yapmayı unutma.
HTML'de input elemanına ekleyebildiğimiz onkeyup property si yardımıyla klavyeden her tuş girildiğinde kontrol fonksiyonumuzu çağırabiliriz.
Şöyle ki;
<input type="password" name="pass1" onkeyup="passControl()">
<input type="password" name="pass2" onkeyup="passControl()">
<span class="password-warning"></span>
function passControl() {
let pass1 = document.querySelector('[name="pass1"]');
let pass2 = document.querySelector('[name="pass2"]');
let warningText = document.querySelector(".password-warning");
if(pass1.value != pass2.value){
warningText.innerHTML = "Şifreler Uyuşmuyor!";
}else {
warningText.innerHTML = "";
}
}
Eğer istersen kontrol sonucu istenilen sonuç sağlanmıyorsa submit butonunu da devre dışı bırakabilirsin.