I have a Button on my Page that toggles front-View like such:
<div id="toggleFrontView">
<span class="cats"><i class="fa fa-tags"></i> Stöbern</span>
<span class="search active"><i class="fa fa-search"></i> Suchen</span>
</div>
What I am trying to do now is create a html-link from somewhere to link to the toggled View "Stöbern".
Like such:
link
Unfortunately this does scroll to the anchor point, but does not toggle the view.
Can someone help?
Thanks
Flo
use Javascript or JQuery. U cant do this only with HTML and CSS.
in jquery there is a toggle display method...
(There are many examples on the net. just give a search before asking a question)
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<div id="toggleFrontView">toggle section</div>
<div id="clk">click me</div>
<script>
$( "#clk" ).click(function() {
$("#toggleFrontView").toggle();
});
</script>
Yes you are right. There is some angular behind it.
Unfortunately I do not understand it.
Here it is:
// Search / cats home
setTimeout(function () {
$('#searchBase').addClass('vis');
}, 500)
$('#toggleFrontView .cats').click(function () {
var toggle = $('#toggleFrontView .cats'),
searchBtn = toggle.find('.search'),
catBtn = toggle.find('.cats'),
filterCats = $('#filterCategories'),
searchHead = $('#searchHead'),
searchBase = $('#searchBase'),
catItem = $('.catItem');
toggle.addClass('active');
$('#toggleFrontView .search').removeClass('active');
filterCats.addClass('vis');
searchBase.removeClass('vis');
searchBtn.addClass('vis');
//catBtn.addClass('hidden');
searchHead.find('h1').removeClass('vis');
searchHead.find('h2').addClass('vis');
loop_();
function loop_() {
animateIn = setTimeout(function () {
$(catItem[0]).addClass('vis');
catItem.splice(0, 1);
if (catItem.length != 0) {
loop_();
}
}, 50);
}
});
$('#toggleFrontView .search').click(function () {
var toggle = $('#toggleFrontView .search'),
searchBtn = toggle.find('.search'),
catBtn = toggle.find('.cats'),
filterCats = $('#filterCategories'),
searchHead = $('#searchHead'),
searchBase = $('#searchBase');
catItem = $('.catItem');
toggle.addClass('active');
$('#toggleFrontView .cats').removeClass('active');
clearTimeout(animateIn);
filterCats.removeClass('vis');
catItem.removeClass('vis');
searchBase.addClass('vis');
searchBtn.removeClass('vis');
//catBtn.removeClass('hidden');
searchHead.find('h1').addClass('vis');
searchHead.find('h2').removeClass('vis');
});
$scope.onImgLoad = function () {
wall.fitWidth();
};
Related
I am trying to do that if I click on this:
<div class="dec qtybutton" data-id="{{ $item->id }}"><i class="zmdi zmdi-chevron-down"></i></div>
It displays an alert to know that it really works, my jQuery code is this one:
$('.dec').on('click', function () {
var id = $(this).attr('data-id');
alert(id);
});
The thing is that I have tried all this and it has not worked:
$('.dec').on('click', function () {
var id = $(this).attr('data-id');
alert(id);
});
$('.dec > i').on('click', function () {
var id = $(this).attr('data-id');
alert(id);
});
I do not know how to do that this jquery reads the .dec i or the .dec then if I push it does not do anything, it does not display the alert.. so I wonder what is the problem? because it has not worked at all.
Thanks!
Try this , In jquery you can directly access data attribute.
$(".dec").click(function(){
let id = $(this).data('id');
alert(id)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dec qtybutton" data-id="2">click<i class="zmdi zmdi-chevron-down"></i></div>
I have tried a few things currently from what I could search online however I, unfortunately, haven't found anything.
enter image description here
I would like to disable the pagination when I click on the replace button. Since it's loading with a spinner and there is a wait I thought it would make sense to disable it but not remove it. I know how to remove, both on the css side and angularjs. However, in all honesty, I am unsure how to disable this particular feature compared to other works that I have done.
HTML:
<button class="btn btn-blue" ng-click="handleLoadAndDeactivate()"
ng-show="'Load' == importAction && 0 == errors"
title="Load">
Replace
</button>
AngularJS (Button):
$scope.handleLoadAndDeactivate = function () {
$scope.onCompleteData.targetBody.withDeactivation = true;
onComplete($scope.onCompleteData, $scope.handleLoadAndDeactivateCompleted);
};
AngularJS (Table):
$scope.operationsPreloadCompletedTableOptions = new NgTableParams({}, {
dataset: importLog
});
html
Here's how you could achive this:
(function () {
"use strict";
const app = angular.module("app", []);
app.controller("app.AppCtrl", ($scope, $timeout) => {
$scope.disablePagination = false;
$scope.handleReplace = () => {
$scope.disablePagination = true;
//Your replace logic goes here
$timeout(() => {
$scope.disablePagination = false;
}, 2000);
};
}
);
})();
body {
margin: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="app.AppCtrl">
<button ng-disabled="disablePagination"><</button>
<button ng-disabled="disablePagination">1</button>
<button ng-disabled="disablePagination">2</button>
<button ng-disabled="disablePagination">></button>
<button ng-click="handleReplace();">Replace</button>
</div>
I'm using this code : http://codepen.io/andytran/pen/xweoPN/ to create an information card slider but i think the code <div class="card"> is having some problems when put in a modal.
I've created a pen with my current code, Kindly review it and suggest the changes to remove that blank card while clicking on the modal. https://codepen.io/anon/pen/bWmYxN
In the first card a blank card with the text how it works is present, how to remove that blank card?
I am not quite familiar with the libraries that you used here. But anyway, something like this can fix your issue if nothing else works out.
$("#modalBtn").click(function() {
setTimeout(
function(){
$("#next").click();
}, 250
);
});
EDIT:
Sorry about that, I forgot that you should add an ID to your button that calls the modal.
<button id="modalBtn" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
you just need to put this code only in $(document).ready
window.setTimeout(function() {
$('#myModal.products').height(283);
},200);
so your jquery code will be
$(document).ready(function() {
window.setTimeout(function() {
$('#myModal.products').height(283);
},200);
var getProductHeight = $('.product.active').height();
$('.products').css({
height: getProductHeight
});
function calcProductHeight() {
getProductHeight = $('.product.active').height();
$('.products').css({
height: getProductHeight
});
}
function animateContentColor() {
var getProductColor = $('.product.active').attr('product-color');
$('body').css({
background: getProductColor
});
$('.title').css({
color: getProductColor
});
$('.btn').css({
color: getProductColor
});
}
var productItem = $('.product'),
productCurrentItem = productItem.filter('.active');
$('#next').on('click', function(e) {
e.preventDefault();
var nextItem = productCurrentItem.next();
productCurrentItem.removeClass('active');
if (nextItem.length) {
productCurrentItem = nextItem.addClass('active');
} else {
productCurrentItem = productItem.first().addClass('active');
}
calcProductHeight();
animateContentColor();
});
$('#prev').on('click', function(e) {
e.preventDefault();
var prevItem = productCurrentItem.prev();
productCurrentItem.removeClass('active');
if (prevItem.length) {
productCurrentItem = prevItem.addClass('active');
} else {
productCurrentItem = productItem.last().addClass('active');
}
calcProductHeight();
animateContentColor();
});
// Ripple
$('[ripple]').on('click', function(e) {
var rippleDiv = $('<div class="ripple" />'),
rippleSize = 60,
rippleOffset = $(this).offset(),
rippleY = e.pageY - rippleOffset.top,
rippleX = e.pageX - rippleOffset.left,
ripple = $('.ripple');
rippleDiv.css({
top: rippleY - (rippleSize / 2),
left: rippleX - (rippleSize / 2),
background: $(this).attr("ripple-color")
}).appendTo($(this));
window.setTimeout(function() {
rippleDiv.remove();
}, 1900);
});
});
Thats it
Hope this helps
The problem was I forgot assigning the active class to the product class
<div class="product-active">
this will make the first screen to appear and if there's no active class, then it'll show a blank screen since it doesn't know what to show. A small typo got me on feet. Anyways, this is for the future reference if anyone makes a silly mistake like this.
Thanks.
I have created a custom polymer component that is a chat component. When a message is posted, a fake answer is published. Nothing very complicated.
Besides, when I instantiate two instances of my component, when I click on the enter button to post a message, the instance of the textfield used to get the text is not the good one.
I don't know if it is a problem of my code or the way I code the component or the regular behavior with polymer.
Please, let me know what is going wrong.
Best regads,
here the code:
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<!-- css import --> <!-- ... -->
<polymer-element name="chat-element">
<template>
<div class="chatview containerwindow" >
<div class="containertitle">
<span>CHAT VIEW</span>
</div>
<div class="chatcomponent">
<div id="messagecontainer" class="messagecontainer" >
</div>
<div class="footer">
<input type="text" class="inputtext" id="inputtextfield" />
<div class="insertchatbutton" id="insertchatbutton" >Enter</div>
</div>
</div>
</div>
</template>
<script>
Polymer('chat-element', {
myself: "",
inputextfiled: "",
insertchatbutton: "",
messagecontainer: "",
domReady: function() {
myself = this;
inputextfiled = this.$.inputtextfield;
inputextfiled.onkeyup = function(event) {
if (event.which == 13) {
myself.insertMessage(this);
}
};
insertchatbutton = this.$.insertchatbutton;
insertchatbutton.onclick = function() {
myself.insertMessage(inputextfiled);
};
messagecontainer = this.$.messagecontainer;
},
insertMessage : function (textview) {
var div = document.createElement('div');
div.classList.add('chatpushed');
var span = document.createElement('span');
span.innerHTML = textview.value;
div.appendChild(span);
messagecontainer.appendChild(div);
//scroll to the bottom
messagecontainer.scrollTop = messagecontainer.scrollHeight;
textview.value = "";
setTimeout(self.reply, 1000);
},
reply : function() {
var div = document.createElement('div');
div.classList.add('chatreceived');
var span = document.createElement('span');
span.innerHTML = "Message received";
div.appendChild(span);
messagecontainer.appendChild(div);
}
});
</script>
First off, here is a working version using more Polymer idioms:
http://jsbin.com/xokar/9/edit
Now, about some of the problems you are having. When you write
inputextfiled = this.$.inputtextfield
because you didn't use var you created a global variable. That means there is only one value of inputextfiled (sic) for the entire application.
You have to use this keyword to create and access instance variables, e.g., this.inputextfield.
You have a related problem here: setTimeout(self.reply, 1000);, because you instructed the timeout to call the self.reply function with window as this. You really want something like setTimeout(self.reply.bind(self)).
Here is some general information about this: http://www.quirksmode.org/js/this.html.
I am having HTML page where i ll have link as "SHOW" while clicking on that I need to show div area. where DIV has iframe.
Normally while loading HTML page that div should be in hidden state while clicking only it should be shown.
I need close button inside that link..While clicking on that I need to close the dive that is hide.
a
function toggleDisplay(id)
{
if (!document.getElementById) { return; }
var el = document.getElementById('straddle');
if (el.style.display == ''){
el.style.display = 'none';
}else {
el.style.display = '';
}
}
I don't want this toggle function
Please help me.
Your javascript
<script type="text/javascript">
<!--
var whatever = document.getElementById('mydiv');
whatever.style.display = 'none';
function show(){
whatever.style.display = 'block';
}
function hide(){
whatever.style.display = 'none';
}
//-->
</script>
and then the HTML
Click here to show element
<br/>
<div id="mydiv">
This will disappear and reappear and
Click here remove element</div>`
You may want this (Iframe may take a while to load, so let it load)
HTML:
Show
<div id="straddle">
<div id="close">Close</div>
<iframe width='100%' src="http://heera.it"></iframe>
</div>
JS: (Put it before closong </body> tag between <scripe type="text/javascript"></scripe>)
window.onload = function() {
var show = document.getElementById('show'),
el = document.getElementById('straddle'),
close = document.getElementById('close');
show.onclick = function() {
el.style.display = 'block';
return false;
};
close.onclick = function(){
el.style.display = 'none';
};
};
Update : Added relevant css
#straddle{ display:none; }
#close{
float:right;
cursor:pointer;
display:inline-block;
}
Use jQuery:
$(document).ready(function() {
$('#link1').click(function() { $('#div').css({ display:'none' }) })
$('#link2').click(function() { $('#div').css({ display:'block' }) })
})