I made a few hide/show panels that I am hoping to use with Vue. The panels are written in Jquery - however when I mount the Jquery functions in Vue, the whole thing seems to fail. The panels do not/hide/show.
Does anyone know why? I have heard that there are issues with Jquery & Vue, but I have not worked out a solution to solve this. Do I need to convert the Jquery to Vue (I'm not even sure how to do this). Can anyone advise on how I could go about fixing this?
Fiddle here: https://jsfiddle.net/syed263/m4s9Lyed/111/
HTML
<!DOCTYPE html>
<html>
<head>
<link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" rel="stylesheet">
<title></title>
</head>
<body>
<div class="container">
<!--COMPONENT START-->
<div>
<div>
<div id='panel0'>
<div class="panel_head">
TITLE
</div>
<div class="panel_body">
BODY
</div>
</div>
</div>
<div>
<span class="btn" id='click' value="Show/Hide"><span id="eee"><i class="far fa-window-maximize"></i></span></span>
</div>
</div>
<!--COMPONENT END-->
<!--COMPONENT START-->
<div>
<div>
<div id='panel2'>
<div class="panel_head">
TITLE
</div>
<div class="panel_body">
BODY
</div>
</div>
</div>
<div>
<span class="btn" id='click2' value="Show/Hide"><span id="eee"><i class="far fa-window-maximize"></i></span></span>
</div>
</div>
<!--COMPONENT END-->
<!--COMPONENT START-->
<div>
<div>
<div id='panel3'>
<div class="panel_head">
TITLE
</div>
<div class="panel_body">
BODY
</div>
</div>
</div>
<div>
<span class="btn" id='click3' value="Show/Hide"><span id="eee"><i class="far fa-window-maximize"></i></span></span>
</div>
</div>
<!--COMPONENT END-->
</div>
</body>
</html>
JavaScript
$('#click').click(function() {
$("#panel0").toggle("slide");
});
$('#click2').click(function() {
$("#panel2").toggle("slide");
});
$('#click3').click(function() {
$("#panel3").toggle("slide");
});
(function() {
$("#panel0").toggle("slide");
$("#panel2").toggle("slide");
$("#panel3").toggle("slide");
}());
Your question is actually more like two; Do this by using jQuery in Vue, or do this in pure Vue. Obviously it would be better to convert it to pure Vue, especially if you are only using the toggle() method, as importing the whole jQuery library for just one function is major overkill.
With jQuery Version:
To use jQuery in Vue you want to wrap in a Vue component and put v-once directive on the component so Vue leaves it alone. Then you would usually target the elements using window.jQuery.('#someid').toggle()
I distilled the panel component down to be reusable and am targeting it with the following method from within the panel component itself.
methods:{
toggleMe(id){
window.jQuery('#'+id).toggle('slide');
}
}
Here is the full working fiddle https://jsfiddle.net/skribe/cmwtqe7d/3/
No jQuery Version
It is quite easy to replicate jQuery's toggle() method since it is only adding/removing "display:none" You would do this with Vue's class bindings. No function even necessary in this case. Just create a hidePanel data property, write a.hideme css class, bind it to div in the template, and toggle it with hidePanel = !hidePanel with an #click event.
<div :id='panel.pId' :class="{hideme : hidePanel}">
<div class="panel_head"> TITLE </div>
<div class="panel_body"> BODY </div>
</div>
<div>
<span #click="hidePanel = !hidePanel" class="btn">
<span id="eee"><i class="far fa-window-maximize"></i></span>
</span>
</div>
Here is the working Jfiddle:
https://jsfiddle.net/skribe/L9mq20nd/14/
Related
I am looking for ways on how this HTML element is being hidden.
The HTML DOM on load looks like this for an example,
<div class="">
<header>
<!---->
<!---->
<!---->
</header>
</div>
After initiating a click event, the HTML DOM changes to this;
<div class="container">
<header>
<!---->
<div class="show"></div>
<!---->
</header>
</div>
Any suggestions on how its doing this? Also, is there a way to capture this live element? I have a click event elsewhere in the DOM that triggers the show element, I have also tried the on function but it shows as undefined. Bear in mind, this is not my own site.
I hope this makes sense, thanks let me know If I need to edit or suggest any changes
it's something similar to this, where class="show" or hide are css classes that set the element to display:none or block
this example is meant for demonstration only
div=document.querySelectorAll("div")
btn.addEventListener("click",()=>{
i=Math.floor(Math.random()*div.length)
console.log(div[i])
div[i].setAttribute("class","show")
})
.hide{display:none};
.show{display:block};
<div class="container">
<header id="h">
<div class="hide">a</div>
<div class="hide">v</div>
<div class="hide">x</div>
</header>
</div>
<button id="btn">show</button>
I am using Materialize CSS and have several modals on my site. Some of them I want to open on loading a particular new page. Everything was working and then I switched to a fixed nav and all of a sudden the open commands aren't working.
It seems that the function is working but it is not changing the modal to display: block so it acts as if it is open, but nothing is visible and the body overlay has been turned on so that you can not scroll.
I have tried numerous different ways to implement the modal.open(); and from what I can tell it is that something is getting in the way of the function and overriding some of the styles.
I'm at a loss. Any help is appreciated.
<body>
<!-- NAVIGATION --->
<header>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<div class="row">
<div class="col s7 m2 valign-wrapper">
<a class="modal-trigger" href="#login"><img src="/images/Logo.png" alt="" class="loginLogo"></a>
</div>
<div class="col s5 m3 offset-m7 valign-wrapper">
<ul>
<li><button id="successBtn" data-target="signUpSuccess" class="btn btn-signUp btn-success modal-trigger">Sign up</button></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<!-- Modal Structure -->
<div id="signUpSuccess" class="modal">
<div class="modal-content">
<div class="row">
<div class="col s12">
<h4>You're signed up!</h4>
<p>We will notify you soon.</p>
</div>
</div>
</div>
</div>
Javascript:
$(document).ready(function(){
$('.modal').modal();
});
$(document).ready(function(){
$("#signUpSuccess").modal();
$("#signUpSuccess").modal("open");
});
To reiterate - The modals are still working when clicked but the #signUpSuccess modal is not opening on load and it was working prior to changing to navbar-fixed.
Materialize CSS: https://materializecss.com/modals.html
I hope this makes sense.
This can be done with instance.open().
<script>
document.addEventListener('DOMContentLoaded', function () {
var Modalelem = document.querySelector('.modal');
var instance = M.Modal.init(Modalelem);
instance.open();
});
</script>
Check documentation Materialize Modals, there are many options available for animations. You should also try using vanilla JS because jQuery is no longer a dependency.
Today I learned about affix and the use of it with Bootstrap. I read all about it on the Bootstrap website and stack-overflow, and eventually checked How to use the new affix plugin in twitter's bootstrap 2.1.0? (see the jsfiddle link) as a good example.
But, I think I'm doing something fundamentally wrong. I added the right javascript to my index.php. I added the CSS to my stylesheet and just copy-pasted the nav-bar example from jsfiddle into my index.php. Nothing works.
HTML:
<div class="container">
<div class="row">
<!-- micro hero unit-->
<div class="span12">
<div class="well">
<h1> Some page title </h1>
<p>This is a website.</p>
<p> <a class="btn btn-primary" href="#">Tell me more</a>
</p>
</div>
</div>
</div>
</div>
JavaScript:
$(function () {
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: {
top: $('#nav').offset().top
}
});
});
Can someone tell me what I did wrong?
I'm working on a responsive tumblr-theme based on the 1140GRID. To make the static videos fit the column, I used the jquery fitvids plugin.
My setup code looks like this:
$(document).ready(function(){
$("#post_{PostID}").fitVids();
});
and the accompanying html like this:
<div class="container">
<div class="row">
<div class="ninecol"> //grid I want it to fit into
{Block:Video}
<div id="post_{PostID}">
{Video-500}
</div>
{/Block:Video}
</div>
</div>
</div>
How do I trigger fitVids for multiple, dynamically generated ids on a page?
Thank you!
You may want to put that closing DIV inside the video block.
<div class="container">
<div class="row">
<div class="ninecol"> //grid I want it to fit into
{Block:Video}
<div id="post_{PostID}">
{Video-500}
</div>
{/Block:Video}
</div>
</div>
</div>
Then, you could target all the subdivs of ninecol.
<script>
$(document).ready(function(){
$('.ninecol > div').fitVids();
});
</script>
I have a page like this:
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="jqtouch.js"></script>
<script language="javascript" type="text/javascript" src="myfunctions.js"></script>
[...]
</head>
<body>
[...]
<div id="jqt">
<div id="home" class="current">
<div class="toolbar">
TITLE
</div>
<div class="s-scrollwrapper">
<div class="content">
<div class="container" >
LOAD ME 1LOAD ME 2
</div>
</div>
</div>
</div>
</div>
[...]
</body>
The contents of the loaded page is like this, for example:
<div id="AG3456AF002347634">
<div class="toolbar">
TITLE 1
</div>
<div class="s-scrollwrapper">
<div class="content">
<div class="container" >
<div style="display:none" id="myItemId"></div><button onclick="javascript: showItem();"/>
</div>
</div>
</div>
</div>
showItem is a function located in myfunctions.js and the contents is, for example this:
function showItem() {jQuery(jQT.hist[0].hash + ' #myItemId').show();}
so when i click on the button, after the page is loaded, jQT.hist[0].hash value is #AG3456AFGG2347634. This works fine the first time that i load a page with AJAX (well, when jQTouch does it). But if i load another page with same content (but the main identifier is different) it doesn't work. After two AJAX calls, the page dom is simmilar to this:
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="jqtouch.js"></script>
<script language="javascript" type="text/javascript" src="myfunctions.js"></script>
[...]
</head>
<body>
[...]
<div id="jqt">
<div id="home">
<div class="toolbar">
TITLE
</div>
<div class="s-scrollwrapper">
<div class="content">
<div class="container" >
LOAD ME 1LOAD ME 2
</div>
</div>
</div>
</div>
<div id="AG3456AF002347634">
<div class="toolbar">
TITLE 1
</div>
<div class="s-scrollwrapper">
<div class="content">
<div class="container" >
<div style="display:none" id="myItemId"></div><button onclick="javascript: showItem();"/>
</div>
</div>
</div>
</div>
<div id="FC00A83473BE33457" class="current">
<div class="toolbar">
TITLE 2
</div>
<div class="s-scrollwrapper">
<div class="content">
<div class="container" >
<div style="display:none" id="myItemId"></div><button onclick="javascript: showItem();"/>
</div>
</div>
</div>
</div>
</div>
[...]
</body>
so when i click the button on the second loaded page it doesn't works cause jQuery is not finding the item. the value of jQT.hist[0].hash is correct, that is #FC00A83473BE33457. The item id #myItemId is the same on both pages, that's the reason to use the wrapper div id that it's unique, to locate each loaded item.
Why this is working on the first page but it's not when i load additional pages into the DOM??
You have to use the "live" command in jQuery for dynamic loaded content.. Pass a class to your button (like .myButton) and to your div container (.container) and use :
$('.myButton').live('click', function(){
//and scope from $(this) here
$(this).parents().find('.container:first').attr('id');
});
I suggest using the jQuery .on() method instead of live, it's a newer method (live has some problems), read about it: http://api.jquery.com/on/
As for passing parameters you can add an attribute to the element clicked or call your function from inside the .on() callback with the parameter, Or even do a little (ugly) hack and use .on for the 'load' (or 'ready') events instead of 'click' and add the onclick (if there is really no other way). Something like:
$(".myButton").on("load", function(event){
$(this).attr('onclick' , yourFunction)
});
But you probably can make it work in a cleaner way with just .on().
Ids are singular, you can not have more than one id with the same value on the page.
Change the ids to classes and reference it that way.