It might be over kill but this works. I copied the first variable in its entirety and and gave it a new name. Also, delinked it from call_files/header.html and css/header.css files. Instead, I linked it to the layout.css which governs the appearance of the second menu. I'm sure there is a way to stream line it.
<script type="text/javascript">
$().ready(function () {
var stickyPanelOptions = {
topPadding: 0,
afterDetachCSSClass: "BoxGlow_Grey2",
savePanelSpace: true,
onDetached: function (detachedPanel, spacerPanel) {
call_files/header.html(call_files/header.html() + " has been detached!");
css/header.css("background-color", "#1000ff");
},
onReAttached: function (detachedPanel) {
call_files/header.html(call_files/header.html().replace(" has been detached!", ""));
},
parentSelector: null
};
var secondstickyPanelOptions = {
topPadding: 150,
savePanelSpace: true,
onDetached: function (detachedPanel, spacerPanel) {
detachedPanel.html(detachedPanel.html() + " has been detached!");
layout.css("background-color", "#ffffff");
},
onReAttached: function (detachedPanel) {
detachedPanel.html(detachedPanel.html().replace(" has been detached!", ""));
},
parentSelector: null
};
// multiple panel example (you could also use the class ".stickypanel" to select both)
$("#Panel1").stickyPanel(stickyPanelOptions);
$("#Panel2").stickyPanel(secondstickyPanelOptions);
$("#Panel3").stickyPanel(stickyPanelOptions);
$("#UnstickPanel3").click(function () {
$("#Panel3").stickyPanel("unstick");
});
stickyPanelOptions.parentSelector = "#AbsoluteDiv";
$("#Panel4").stickyPanel(stickyPanelOptions);
stickyPanelOptions.parentSelector = "#NormalDiv";
$("#Panel5").stickyPanel(stickyPanelOptions);
});
</script>
HTML
<div id="Panel1" class="stickyPanel">
<div class="headerBGdiv"> </div>
<?php include('../call_files/pagesheader.html');?>
</div>
<div id="Panel2" class="stickyPanel">
<div id="navbar2">
<ul id="tabs">
<li>Buyer's Guide</li>
<li>Export Restrictions</li>
<li>Infrared 101</li>
<li>White Pages</li>
<li>Terminology</li>
<li>Newsroom</li>
<li>Gallery</li>
</ul>
</div>
</div>
Try This it uses separate config options for each panel.
<script type="text/javascript">
$().ready(function () {
var stickyPanelOptions = {
topPadding: 0,
savePanelSpace: true,
onDetached: function (detachedPanel, spacerPanel) {
call_files/header.html(call_files/header.html() + " has been detached!");
css/header.css("background-color", "#1000ff");
},
secondStickyPanelOptions = stickyPanelOptions,
onReAttached: function (detachedPanel) {
call_files/header.html(call_files/header.html().replace(" has been detached!", ""));
},
parentSelector: null
};
secondStickyPanelOptions.topPadding = 100;
// multiple panel example (you could also use the class ".stickypanel" to select both)
$("#Panel1").stickyPanel(stickyPanelOptions);
$("#Panel2").stickyPanel(secondStickyPanelOptions);
$("#Panel3").stickyPanel(stickyPanelOptions);
$("#UnstickPanel3").click(function () {
$("#Panel3").stickyPanel("unstick");
});
stickyPanelOptions.parentSelector = "#AbsoluteDiv";
$("#Panel4").stickyPanel(stickyPanelOptions);
stickyPanelOptions.parentSelector = "#NormalDiv";
$("#Panel5").stickyPanel(stickyPanelOptions);
});
</script>
Related
I am using a Select class I have found on Internet, the problem is that if i create the option in the Select dinnamically, using angluar ng-repeat, the option will not be clickable, but if i create it manually, also using dynamic values, it can be clicked.
This is the code :
MainFile :
...
<div id="SiteList" ng-controller="SiteController as siteCtrl" ng-if="masterCtrl.isUserLogged()" ng-include="'Select2/index.html'" ng-init="siteCtrl.getSites()" >
...
This is Select2/index.html
...
<body>
<div class="drop">
<div class="option active placeholder" data-value="placeholder">
Seleziona un sito
</div>
<div class="option" ng-repeat="sito in siteCtrl.siti" data-value="{{sito.name}}">{{sito.name}}</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="Select2/js/index.js"></script>
</body>
...
Then the Select2/js/index.js
$(document).ready(function() {
$(".drop .option").click(function() {
var val = $(this).attr("data-value"),
$drop = $(".drop"),
prevActive = $(".drop .option.active").attr("data-value"),
options = $(".drop .option").length;
$drop.find(".option.active").addClass("mini-hack");
$drop.toggleClass("visible");
$drop.removeClass("withBG");
$(this).css("top");
$drop.toggleClass("opacity");
$(".mini-hack").removeClass("mini-hack");
if ($drop.hasClass("visible")) {
setTimeout(function() {
$drop.addClass("withBG");
}, 400 + options*100);
}
triggerAnimation();
if (val !== "placeholder" || prevActive === "placeholder") {
$(".drop .option").removeClass("active");
$(this).addClass("active");
};
});
function triggerAnimation() {
var finalWidth = $(".drop").hasClass("visible") ? 22 : 20;
$(".drop").css("width", "24em");
setTimeout(function() {
$(".drop").css("width", finalWidth + "em");
}, 400);
}
});
Anyone has any idea about how to resolve this?
Avoid mixing Angular.js and jQuery.
Instead you can use Angular version of Select2:
https://github.com/angular-ui/ui-select
I am trying to create an application with multiple chat rooms. At the moment one of the rooms works by sending and receiving messages. However when I route and change template and try send a message in another room the message does not send but the link at the top changes? i.e localhost:3000/java?text=hi - It says the message is going to cache.
How can I get messages to send in the other rooms, store in the collection and display?
Here is my code:
Client.js
// This code only runs on the client
Meteor.subscribe("messages", {
onReady: function () {
scrollToBottom();
autoScrollingIsActive = true;
}
});
/* helper code */
Template.body.helpers({
recentMessages: function () {
return Messages.find({}, {sort: {createdAt: 1}});
},
/* unread message helper */
thereAreUnreadMessages: function () {
return thereAreUnreadMessages.get();
}
});
/*chat window scrolling*/
Template.message.onRendered(function () {
if (autoScrollingIsActive) {
scrollToBottom(250);
} else {
if (Meteor.user() && this.data.username !== Meteor.user().username) {
thereAreUnreadMessages.set(true);
}
}
});
Template.body.events({
"submit .new-message": function (event) {
var text = event.target.text.value;
Meteor.call("sendMessage", text);
scrollToBottom(250);
event.target.text.value = "";
event.preventDefault();
},
/* scroll event */
"scroll .message-window": function () {
var howClose = 80; // # pixels leeway to be considered "at Bottom"
var messageWindow = $(".message-window");
var scrollHeight = messageWindow.prop("scrollHeight");
var scrollBottom = messageWindow.prop("scrollTop") + messageWindow.height();
var atBottom = scrollBottom > (scrollHeight - howClose);
autoScrollingIsActive = atBottom ? true : false;
if (atBottom) { // <--new
thereAreUnreadMessages.set(false);
}
},
"click .more-messages": function () {
scrollToBottom(500);
thereAreUnreadMessages.set(false);
}
});
Template.footer.usercount = function () {
return Meteor.users.find().count();
};
Here is my server.js
// This code only runs on the server
Meteor.publish("messages", function () {
return Messages.find();
});
// This code only runs on the server
Meteor.publish("messages_java", function () {
return MessagesJava.find();
});
And here is the template code for the "Java room":
<template name="java">
<!--<h6>This is the Java template</h6>-->
<!--<p>*Put chatroom here*</p>-->
<div class="container">
<header>
<h1>ITHub Java Room</h1>
{{> loginButtons}}
</header>
<!-- chat messages here -->
<!-- -->
<ul class="message-window">
{{#each recentMessagesJava}}
{{> message}}
{{/each}}
</ul>
<!-- more-messages button -->
{{#momentum plugin="fade"}}
{{#if thereAreUnreadMessages}}
<button class="more-messages">New Messages ▾</button>
{{/if}}
{{/momentum}}
<footer>
{{#if currentUser}}
<form class="new-message">
<input type="text" name="text" placeholder="Add a message" autocomplete="off" />
</form>
{{/if}}
<br />
</footer>
<hr />
<li class="message-java">
<div class="username">{{username}}</div>
<div class="message-text">{{messageText}}</div>
</li>
</div>
Your template isn't called body, but java, so to attach events you need to add them via Template.java.helpers, like so:
Template.java.events({
"submit .new-message": function (event) {
var text = event.target.text.value;
Meteor.call("sendMessage", text);
scrollToBottom(250);
event.target.text.value = "";
event.preventDefault();
},
/* scroll event */
"scroll .message-window": function () {
var howClose = 80; // # pixels leeway to be considered "at Bottom"
var messageWindow = $(".message-window");
var scrollHeight = messageWindow.prop("scrollHeight");
var scrollBottom = messageWindow.prop("scrollTop") + messageWindow.height();
var atBottom = scrollBottom > (scrollHeight - howClose);
autoScrollingIsActive = atBottom ? true : false;
if (atBottom) { // <--new
thereAreUnreadMessages.set(false);
}
},
"click .more-messages": function () {
scrollToBottom(500);
thereAreUnreadMessages.set(false);
}
});
And same thing is with helpers.
So, just a little background ... I need to process data in my controller with data that is coming from the Client side. Thus, knockout.js was suggested.
This particular page has a main page, and then multiple placeholders which all have the same format. The main issue is that only one of these is appearing, and that happens to be the last one. When I inspect element, I see the data present, but not rendered.
here is the code:
First ... the markup for the parent item.
#using (Html.BeginFooterScripts())
{
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
<script type="text/javascript" src="/Content/Northwestern/js/_libs/knockout.mapping/knockout.mapping.2.4.1.js"></script>
<script type="text/javascript" src="~/Content/Northwestern/js/views/TabPanel/location-card.js"></script>
<script type="text/javascript">
var once = true;
$(function () {
if (once) {
initialize();
once = false;
}
});
</script>
}
<div class="resp-tabs-container tabs-narrow">
#if (Model.TabSelector.Equals("location-row"))
{
<div>
#*this div needs to be empty. The easyResponsiveTabs plugin adds classes to it and matches it with the <li> in the resp-tab-list above*#
#*Location List *#
<div class="#Model.TabSelector">
<div class="indent">
<h3>#Model.Title</h3>
</div>
#Html.Sitecore().DynamicPlaceholder("Location-Card")
</div>
</div>
}
The DynamicPlaceholder is where the problem is ... currently there are 9 identical Location-Cards
Here is the markup for the LocationCard.cshtml
#using (Html.BeginFooterScripts())
{
<script type="text/javascript" src="~/Content/Northwestern/js/views/TabPanel/location-card.js"></script>
<script>
$(function() {
geoLocate(function(location) {
var latitude = location.coords.latitude;
var longitude = location.coords.longitude;
displayLocation('#Model.LocationId', latitude, longitude);
});
});
</script>
}
<div id="detail-container">
</div>
<script type="text/html" id="location-detail-template">
<h2 class="location-title" itemprop="name" data-bind="text: ItemName">#Model.Location.ItemName</h2>
</div>
<div class="distance">
<i class="material-icons">place</i> <span data-bind="text: Distance.toFixed(1)"> Mi</span>
</div>
<div class="location-phone">
<a data-bind="attr: { 'href': clickToCallify(Phone), 'data-track-event': 'Find a Location - Detail', 'data-track-action': 'call icon' }" class="tel" itemprop="telephone">#Model.Location.Phone</a>
</div>
</div>
</div>
</script>
</div>
<div class="col lg-6 xl-7">
#(new HtmlString(Model.Body))
</div>
</div>
}
and here is the Location-card.js
var applied = false;
var geoLocateError = function onError(error) {
alert(error.message);
};
function ViewModel() {
var self = this;
self.currentLocation = {
latitude: 0,
longitude: 0
};
}
var viewModel = new ViewModel();
$(function () {
});
function initialize() {
ko.applyBindings(viewModel);
geoLocate(function(location) {
initLocation(location);
}, geoLocateError);
}
/**********************************************
* Location Functions
**********************************************/
function initLocation(location) {
viewModel.currentLocation = {
latitude: location.coords.latitude,
longitude: location.coords.longitude
};
}
function displayLocation(id, lat, lng) {
var apiUrl = '/api/northwestern/locations/getlocationbyid/' + id;
var data = {
'latitude': lat,
'longitude': lng
};
self.LocationId = id;
$.getJSON(apiUrl, data, function (response) {
var fragment = document.createDocumentFragment(),
container = document.createElement('div'),
viewModel = response;
fragment.appendChild(container);
// merge together all the display types into a commma-separated list
response.TypeListDisplay = $.map(response.Types, function (obj, t) {
return obj.ItemName;
}).join(', ');
ko.renderTemplate(
"location-detail-template",
viewModel, {
afterRender: function () {
$('#detail-container').html(container.innerHTML);
}
},
container
);
});
}
So, I am not certain what to do. I have been working on this now for several days
any help would be appreciated.
I am trying to group the divs with the same attribute and put them into a container div. The divs are generated. The structure looks like this.
<div class="cleanse">A</div>
<div class="treat">B</div>
<div class="prime">C</div>
<br><br><br>
<div class="product"><img alt="red" src="http://aar.co/508-859-thickbox/therapy-ball-small-red.jpg" width="100px"></div>
<div class="product"><img alt="blue" src="http://www.valleyvet.com/swatches/11178_L_230_vvs.jpg" width="100px"></div>
<div class="product"><img alt="red" src="http://aar.co/508-859-thickbox/therapy-ball-small-red.jpg" width="100px"></div>
<div class="product"><img alt="yellow" src="http://debenhams.scene7.com/is/image/Debenhams/304028400423?$ProdLarge$" width="100px"></div>
<div class="product"><img alt="blue" src="http://www.valleyvet.com/swatches/11178_L_230_vvs.jpg" width="100px"></div>
And the script what I have so far which is not working is
$(function(){
$('.product').each(function(){
if ($(this).is('[red]')) {
$(this).appendTo($('.cleanse'));
} else {
if ($(this).is('[blue]')) {
$(this).appendTo($('.treat'));
} else {
if ($(this).is('[yellow]')) {
$(this).appendTo($('.prime'));
}
}
}
}
});
Use the has filter:
$(function() {
var $products = $('.product');
$products.filter(':has([alt=red])').appendTo('.cleanse');
$products.filter(':has([alt=blue])').appendTo('.treat');
$products.filter(':has([alt=yellow])').appendTo('.prime');
});
Here's the fiddle: http://jsfiddle.net/qxRY4/1/
If you're dealing with a larger dataset, you might want to use a loop instead. Here's how:
$(function() {
var $products = $('.product');
var map = {
red: 'cleanse',
blue: 'treat',
yellow: 'prime'
};
$.each(map, function (attr, className) {
$products.filter(':has([alt=' + attr + '])').appendTo('.' + className);
});
});
Here's the fiddle: http://jsfiddle.net/qxRY4/2/
try this:
$(function(){
var colorMap = {red: "cleanse", blue: "treat", yellow: "prime"};
$('.product > img').each(function(){
var el = $(this);
el.appendTo($('.' + colorMap[el.attr('alt')]));
});
});
http://jsfiddle.net/y9CS7/2/
$(function() {
var $prod = $('.product');
$prod.find('[alt="red"]').appendTo($('.cleanse'));
$prod.find('[alt="blue"]').appendTo($('.treat'));
$prod.find('[alt="yellow"]').appendTo($('.prime'));
});
This will move the parent <div>
$(function() {
var $prod = $('.product');
$prod.find('[alt="red"]').parent().appendTo($('.cleanse'));
$prod.find('[alt="blue"]').parent().appendTo($('.treat'));
$prod.find('[alt="yellow"]').parent().appendTo($('.prime'));
});
if you want to keep the iteration on .product, first you need to select the img tag, not only this, since this would be the div, not the image tag with the alt:
$(function(){
$('.product').each(function(){
if ($("img",this).is('[alt="red"]')) {
$(this).appendTo('.cleanse');
} else {
if ($("img",this).is('[alt="blue"]')) {
$(this).appendTo('.treat');
} else {
if ($("img",this).is('[alt="yellow"]')) {
$(this).appendTo('.prime');
}
}
}
}
});
I am after recommendations of what dijit widget I can use for the screenshot below. Our users will need to add another row.
Can use
function createRow(ParentNode) {
require(["dojo/_base/parser", "dojo/dom-construct"], function(parser, domConstruct){
var div = dojo.create("div", { 'data-dojo-type' : 'dijit.form.TextBox' }, ParentNode);
parser.parse(div);
};
}
Or
function createRow(ParentNode) {
var row = new dijit.form.TextBox( { /* params */ } );
row.placeAt(ParentNode);
row.startup();
}
With
<div id="parent">
<div data-dojo-type="dijit.form.TextBox"></div>
</div>
<div
data-dojo-type="dijit.form.Button"
data-dojo-props="onClick: function() { createRow('parent'); }"
></div>