document.querySelector('#info_banner_merch').innerHTML = lang.info_banner_merch;
document.querySelector('#info_banner_website').innerHTML = lang.info_banner_website;
document.querySelector('#info_banner_team').innerHTML = lang.info_banner_team;
<div class="swiper-slide">
<span id="info_banner_merch" class="d-inline-block font-sm color-brand-2"></span>
</div>
<div class="swiper-slide">
<span id="info_banner_website" class="d-inline-block font-sm color-brand-2"></span>
</div>
<div class="swiper-slide">
<span id="info_banner_team" class="d-inline-block font-sm color-brand-2"></span>
</div>
The Objects are all updating the innerHTML-values but the last element ('info_banner_team') doesn't show the updated text. If i press the swiper in the opposite direction (previous-button) it displays it right. Anyone have any idea?
EDIT:
I have a swiper with 3 elements. The swiper has also "go next" and "go previous" buttons to switch the shown element. If i go through "go next" the last of the 3 elements doesn't display any Text. If i go through "go previous" the text is shown correctly.
Update each swiper-element with html text. 2 are working, the last one isn't.
Related
I have very little JavaScript experience and no vue or react experience, so understanding these answers is proving to be futile. >.<
I found these 2 solutions
Alpine nested x-data
https://github.com/alpinejs/alpine/issues/49
This is the issue I am encountering.
I got the x-data and x-show to work for the collapse sidebar button.
When I added another x-data element in a child div that houses the content, it seems to break everything and nothing works.
Both the sidebar div, and content div are inside the parent div that controls the collapse button.
This is how the layout looks like
This is the code of how it is somewhat layed out
// Div that houses main content and sidebar
<div x-data="{sidebarActive: true}">
// Sidebar button
<div #click="sidebarActive =!sidebarActive"> collapse icon </div>
// kanban content
<div x-data ="{kanbanToggle: 2}">
// toggle buttons
<div>
<div #click="kanbanToggle: 1"> button 1 </div>
<div #click="kanbanToggle: 2"> button 2 </div>
<div #click="kanbanToggle: 3"> button 3 </div>
</div>
// kanban board content
<div>
<div x-show ="kanbanToggle ===1"> timeline view </div>
<div x-show ="kanbanToggle ===2"> card view </div>
<div x-show ="kanbanToggle ===3"> list view </div>
</div>
</div>
<div x-show="{sidebarActive:true}"> sidebar content </div>
</div>
Any help much appreciated! Thanks in advance!
The initial issue I can see with your code is that kanbanToggle: 1 is not valid JavaScript, the correct synax is kanbanToggle = 1.
So replace:
<div #click="kanbanToggle: 1"> button 1 </div>
<div #click="kanbanToggle: 2"> button 2 </div>
<div #click="kanbanToggle: 3"> button 3 </div>
with
<div #click="kanbanToggle = 1"> button 1 </div>
<div #click="kanbanToggle = 2"> button 2 </div>
<div #click="kanbanToggle = 3"> button 3 </div>
I've found a number of similar questions but cannot seem to get their solutions to work for me so hopefully posting the specific code will help.
I use Caspio datapages deployed on html pages. On an html page I have a full 12 column div that I need to change to a 9 column div when a link is clicked on. This is because I have a collapsed 3 column div that is opened when the link is clicked.
So what i need:
1) upon page load 3 column div collapsed, 12 column div visible.
2)user clicks link and 3 column div is visible and 12 column div changes
to 9 column div so it is moved to the right of the 3 column div
instead of below it.
The Caspio datapages can get messed up if the css is intense (is random when it happens so I can't describe it in detail) so I need to keep it as simple as possible. If I could change div class="col-md-12" to div class="col-md-9" on the link click that would be great. I've seen other posts with changing column classes but I cannot seem to get them to work.
Here's the main code I'm working with:
<div class="col-md-3" style="overflow-x:hidden;overflow=y:hidden;">
<div id="newcomment" class="collapse">
<caspio deploy code for datapage1>
</div>
</div>
<div class="col-md-12">
<div>
<caspio deploy code for datapage2>
</div>
</div>
<a class="btn page-action" href="#newcomment" style="color:green;" data-toggle="collapse"><i class="fa fa-plus" aria-hidden="true"></i> Add Comment</a>
So if I can change div class="col-md-12" to div class="col-md-9" upon the #newcomment link click that should probably do it. Many thanks in advance-
There are several ways you can do this. Here is one...
$('#btnSwitch').click(function(){
$('.col-md-3').toggleClass('hide');
$('#right').toggleClass('col-md-12 col-md-9');
})
HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
page1
</div>
<div class="col-md-9" id="right">
page2
</div>
</div>
<br>
<button class="btn btn-lg" id="btnSwitch">Switch</button>
</div>
http://www.codeply.com/go/pFNLZqoZUV
I'm attempting to create a slick carousel using the slick library http://kenwheeler.github.io/slick/
Slick is loading and it's applying classes, containers, buttons etc. properly but the slides are permanently off screen. The translate3d x value on the active slide is always set to be outside the window. When clicking the 'previous' button or dragging the slide I'm able to pull it into the screen but as soon as it reaches the 0,0,0 position it returns to being outside the screen immediately. Here is my attempt to get it to work
<div class="slick-slider homepage-slider">
<div>
<a href="#">
<div class="slide-content"><img src="http://placehold.it/350x150">
<div class="slide-text">
<h2 class="slide-title">Slide Title</h2>
<div class="slide-caption">
<p>Slide Summary</p>
</div>
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="slide-content"><img src="http://placehold.it/350x150">
<div class="slide-text">
<h2 class="slide-title">Slide Title</h2>
<div class="slide-caption">Slide summary</div>
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="slide-content"><img src="http://placehold.it/350x150">
<div class="slide-text">
<h2 class="slide-title">Slide title</h2>
<div class="slide-caption">
<p>Slide summary</p>
</div>
</div>
</div>
</a>
</div>
</div>
In my js file I'm using
jQuery(document).ready(function() {
jQuery('.homepage-slider').slick({
rtl: true
});
});
http://jsfiddle.net/q1qznouw/549/
note: dragging works on my webpage but not within the jsfiddle sandbox
I receive no javascript errors. Is there a reason why the slides are permanently at a translate3d position outside the browser window, and when dragging onto the screen returns outside the browser window when letting go?
The issue is with your rtl setting. This requires a bit of extra markup to work (from Slick docs):
Note: the HTML tag or the parent of the slider must have the attribute
"dir" set to "rtl".
If you change your slick parent div from this:
<div class="slick-slider homepage-slider">
To this:
<div class="slick-slider homepage-slider" dir="rtl">
That should sort it
First of all apologies for the terrible wording, I'm having trouble describing the issue.
Currently I have a series of buttons in a horizontal row, whereby clicking on a button shows it's associated content underneath, and clicking on a different button collapses the current content and shows the new content (using the 'data-parent' attribute). I want it to function so that for example, if button 3 is clicked and it's content shown, and the user then clicks on button 3 again, instead of the content collapsing I would like it to remain on screen. The way it works currently is that if button 3's content is shown and button 3 is clicked again, the element collapses and we're just left with a row of buttons again. I've experimented with the '.collapse("show")' method but I'm having difficulty implementing it (not even sure if it's possible to work with this method). Here is the associated code:
<div class ="container" id="content">
<button class="btn btn-info" data-toggle="collapse" data-target="#0" data-parent="#content">0</button>
<button class="btn btn-info1" data-toggle="collapse" data-target="#1" data-parent="#content">1</button>
<button class="btn btn-info2" data-toggle="collapse" data-target="#2" data-parent="#content">2</button>
<button class="btn btn-info3" data-toggle="collapse" data-target="#3" data-parent="#content">3</button>
<div class="panel">
<div id="0" class="collapse in">
Button 0's content
</div>
<div id="1" class="collapse">
Button 1's content
</div>
<div id="2" class="collapse">
Button 2's content
</div>
<div id="3" class="collapse">
Button 3's content
</div>
</div>
</div>
Any help would be greatly appreciated.
Dont know if this solution will satisfy you but you can block this like that
for example
$('.btn').click(function(e) {
target = $(this).data('target');
if($(target).is(':visible')){
return false;
}
});
In this situation if you click on "button1" it will collapse the correct div and if you click this again nothing will happen. However clicking another button will collapse another div.
I'm about 2 months new to programming and Twitter Bootstrap, so please be kind!
I've done a lot of digging and searching, but am not sure I am using the correct terms so I figure I'd ask directly.
I am trying to create an Expand/Collapse all button that will expand or collapse all items under a Title Header. The items under a title header include a text piece and an image. I want to be able to expand/collapse the text piece by clicking on the Title Header. I want to be able to expand/collapse the text AND the image by clicking on the button.
The problem is: I want to button to expand/collapse everything regardless if the text piece is expanded or collapsed.
This is the jsfiddle: http://jsfiddle.net/mcfly303/XXXYn/1/
As you can see, the button will toggle items open or closed opposite of their current state. Is there a way to do a "universal" expand/collapse, regardless if the nested items are expanded or collapsed?
Basically I'd like the "toggle all" button to result only in a) the title or b) the title and the image.
Thanks in advance for any help!!!!
my html:
<div class="well sidebar-nav" id="sidebar">
<ul class="nav nav-list">
<li>Toggle All
</li>
</ul>
</div>
<div class="accordion" id="accordion1">
<div class="accordion-group">
<div class="row-fluid">
<div class="span9">
<div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
<h2>COOL HAND LUKE</h2>
</a>
</div>
</div>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<div class="mainList"> Paul Newman Movies <i class="icon-white icon-th-list"></i>
</div>
</div>
</div>
</div>
</div>
<div id="collapseMain" class="accordion-body collapse in">
<div class="accordion-inner">
<div class="row-fluid">
<div class="span12">
<img src="http://www.samefacts.com/wp-content/uploads/2012/12/CoolHandLuke_135Pyxurz.jpg" alt="">
</div>
</div>
</div>
</div>
my javascript:
$('.expandcollapse').click(function () {
$('.collapse').each(function (index) {
$(this).collapse("toggle");
});
});
EDIT: So I partially figured it out. jsfiddle: http://jsfiddle.net/mcfly303/XXXYn/4/
I split to button into two separate buttons to clearly label each function I want to achieve.However, there is still a kink. Namely on loading, the FIRST CLICK on the Title View button will toggle the text open and the picture closed. And also on load, the first click on the Title and Image button will toggle the text open and keep the image open.
After the first click, everything works fine, which to clarify (and edit my misstatement above) is:
Click on TITLE VIEW - collapses all except the Title. Click on the Title will expand/collapse the text piece
Click on TITLE AND IMAGE VIEW - expands to Title and Image. Click on the Title will expand/collapse the text piece
If anyone can please help with this last kink of the "first click problem" I would really appreciate it!
Thanks.
Updated JS:
var isCollapsed = false;
$('.expandcollapse').click(function () {
var collapseCommand = isCollapsed ? "show" : "hide";
$('.collapse').each(function () {
$(this).collapse(collapseCommand);
});
isCollapsed = !isCollapsed;
});
I also added the in class to #collapseOne so the page displays correctly initially.
Edit:
New code based on your edit:
$('.titleView').click(function () {
$('#collapseOne, #collapseMain').collapse('hide');
});
$('.fullStubView').click(function () {
$('#collapseOne, #collapseMain').collapse('show');
});
Unless I'm missing something, seems like this solves the problem. jsFiddle