I have a page called 'services'. When you go to that page from the navigation menu I do not want any of the services to show up (too complicated to explain it). Then on my index page I have links for each type of service there is. If you click on a link it will take you to the services page and only show that service.
For the individual service links, they look like this:
Service 1
Service 2
Service 3
This aspect of this system works. It takes me to the services page and only shows the service I clicked on, from the link.
The part that doesn't work is not showing the services OR the service-display-box from the navigation menu. Right now all of the services show and the service-display-box does as well.
I tried to create logic to prevent this from happening, but it isn't working. In the javascript below you will see comments like //added, this is what I added to try and create logic that it would show the service-display-box and specific service item if there was a hash in the browser, or else it would not show the service-display-box at all.
What is wrong with my logic?
$(function(){
//get the section name from hash
var sectionName = window.location.hash.slice(1);
if (sectionName != null) { //added
//then show the section
$('#service-display-box').show();
$(window.location.hash).show().scroll().siblings().hide();
} else { //added
$('#service-display-box').hide(); //added
} //added
})
#service-display-box {
display: none;
}
<div id="service-display-box">
<div id="service-display-box-container">
<div class="service-item-box" id="service1">
<div class="service-item-title">1</div>
<h2 class="service-item-description"> Service</div>
</h2>
<h2 class="service-item-box" id="service2">
<div class="service-item-title">2</div>
<div class="service-item-description"> Service</div>
</h2>
<h2 class="service-item-box" id="service3">
<div class="service-item-title">3</div>
<div class="service-item-description"> Service</div>
</h2>
<h2 class="service-item-box" id="service4">
<div class="service-item-title">4</div>
<div class="service-item-description"> Service</div>
</h2>
<h2 class="service-item-box" id="service5">
<div class="service-item-title">5</div>
<div class="service-item-description"> Service/div>
</h2>
<h2 class="service-item-box" id="service6">
<div class="service-item-title">6</div>
<div class="service-item-description"> Service</div>
</h2>
<div style="clear:both;"></div>
<div id="service-top"><span id="service-top-border">Back to all services</span></div>
</div>
</div>
I've also tried
if (sectionName > 1) {
window.location.hash.slice(1) returns an empty string, which is not the same as null. I think you want to check .length == 0 instead.
Related
For a project i'm working on the users that are logged in with enough priveledge to post a new news item are able to see a button to add news items. I would like to show these news item with 'switching styles' (for the lack of a better word). I'm pulling the data from a database where the user submits it through a form on a seperate page. Then i'm requesting all of the news items back on the home page where it lists them as a 'news feed'. The feed fetches like a charm and can be seen here : http://prntscr.com/et39yp
I would like to make the second, fourth, sixth, etc have the first-image or first-video list on the left, like so : http://prntscr.com/et3akw
Is there an easy way of doing this?
#{
var db = Database.Open("Default");
var fetchRows = "SELECT * FROM Articles";
db.Execute(fetchRows);
var articles = db.Query("SELECT articleTitle, articleText, articleVideoUrl, articleImage FROM Articles ORDER BY id DESC");
var articleTitle = db.Query("SELECT articleTitle FROM Articles");
string lorem = "";
}
<div class="Articles">
<h2>Nieuws Feed</h2>
#foreach (var title in articles)
{
<div class="article">
#{
string text = title.articleText;
string firstLetters = new string(text.Take(50).ToArray());
<div class="col s6">
<h3>#title.articleTitle</h3>
<p>#firstLetters</p>
Lees meer...
</div>
<div class="col s6">
#{
if (title.articleVideoUrl != lorem)
{
//Iframe for youtube feed here
}
else if (title.articleVideoUrl == lorem && title.articleImage != "")
{
<div class="result">
<img src="#title.articleImage" alt="image"/>
</div>
}
}
</div>
}
</div>
}
</div>
Now the switching news article thing is something i would be able to work out, the thing i'm struggling with would be the following. The user is able to edit / remove news items. So i cant keep track of an index value or anything similar since it would be invalid should the user remove an item from the middle of the feed. My first guess would be to use the .toggleclass of javascript and that would probably work with originially loading the items but if the user would remove an item it wouldn't show them the right way after. Any help would be welcome.
It shouldn't matter that you are adding the items individually, the nth-child(odd|even) should still work.
You can see it working here: http://jsfiddle.net/Chairman_Mau/uap93rtL/4/ - notice when you click the move up/move down buttons the style changes automatically.
HTML
<div class="articles">
<h1>header</h1>
<div class="article">
paragraph
</div>
<div class="article">
paragraph
</div>
<div class="article">
paragraph
</div>
<div class="article">
paragraph
</div>
<div class="article movethis">
paragraph - move this one
</div>
<div class="article">
paragraph
</div>
<input type="button" value="add article" class="addarticle"/>
<input type="button" value="move up" class="moveup"/>
<input type="button" value="move down" class="movedown"/>
</div>
Javascript
$(".addarticle").click(function () {
$(".articles").append('<div class="article">added</div>');
});
$(".moveup").click(function(){
var prev = $(".movethis").prev('.article');
$(".movethis").detach().insertBefore(prev);
});
$(".movedown").click(function(){
var next = $(".movethis").next('.article');
$(".movethis").detach().insertAfter(next);
});
CSS
.articles .article:nth-of-type(even)
{
color: Green;
}
.articles .article:nth-of-type(odd)
{
color: Red;
}
Allow me to paste the HTML first that I am hoping to process.
<div class="top-box-part">
<h3 class="video-link-on-search">
My Title
<div style="display: none;">
<div id="colorbox-inline-1449860223">
<div class="jwplayer-video">...</div>
</div>
</div>
</h3>
<h3 class="search-title">My Another Title</h3>
</div>
<div class="top-box-part">
<h3 class="video-link-on-search">
My Title 2
<div style="display: none;">
<div id="colorbox-inline-1449860223">
</div>
</div>
</h3>
<h3 class="search-title">My second another title</h3>
</div>
As you can see there are two <h3> in the div. What I am hoping to do is, to show one <h3> in main div top-box-part. If the first <h3 class='video-link-on-search'> has jwplayer-video in it, then show this , and hide the second <h3 class='search-title'>, otherwise, hide the first h3 class='video-link-on-search' and show the second <h3 class='search-title'>.
There are many <div class='top-box-part'> in the page and each is with two <h3>. We only have one to show one <h3> in each.
Check with find()
$('.top-box-part').each(function() {
$(this).find('h3').hide();
if ($(this).find('h3 .jwplayer-video').length) {
$(this).find('h3:first').show();
} else {
$(this).find('h3:not(:first)').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="top-box-part">
<h3 class="video-link-on-search">
My Title
<div style="display: none;">
<div id="colorbox-inline-1449860223">
<div class="jwplayer-video">...</div>
</div>
</div>
</h3>
<h3 class="search-title">My Another Title</h3>
</div>
<div class="top-box-part">
<h3 class="video-link-on-search">
My Title 2
<div style="display: none;">
<div id="colorbox-inline-1449860223">
</div>
</div>
</h3>
<h3 class="search-title">My second another title</h3>
</div>
The proper selectors would be:
Every first h1 in every top_box-part:
var firsts = $('.top-box-part h3:nth-child(1)');
Every second h1 in every .top-box-part:
var seconds = $('.top-box-part h3:nth-child(2)');
Now you can simply check that like:
$.each(first,function(i,o){
var first_element_of_current_top_box = o;
var second_element_of_current_top_box = seconds[i];
// here you can compare anything and do anything with those elements (ex. `.hasClass` etc.)
});
Please note that this way needs 1st and 2nd H1 to be there!
I have a condition where basically what I want to do is if there is a bool set to true I want to toggle. But the bool is attached to items in a list. Take a look:
<div ng-repeat="step in progress.steps">
<div ng-if="step.criticalError">
</div>
</div>
Simple enough.
Now the problem!
Take a step backward to the containing divs. I want to handle a scenario like this..Have 3 divs. Only 2 will show at a time. The factor that determines that is the criticalError. It is an all or nothing, so if one trips as a critical error then all the steps show on top; otherwise they will all show below if there is no critical. So like this.
<div ng-show="containsCriticalError"></div>
<div>Always shows.</div>
<div ng-show="!containsCriticalError"></div>
Or would you have to iterate through the list, is it possible to stop an ng-repeat once a condition is met?
What about this?
<div ng-show="!containsCriticalError">Always shows.</div>
<div>
<div ng-repeat="step in progress.steps">
<div ng-if="step.criticalError">
</div>
</div>
</div>
<div ng-show="containsCriticalError">Always shows.</div>
Or just move the div with CSS?
Might be a bit funky, but it works
<div ng-repeat="step in progress.steps"
ng-init="show = !step.criticalError && ($$prevSibling || {show: true}).show">
<div ng-if="show">
</div>
</div>
EDIT:
I misread the question. The above approach displays only the steps above the first criticalError.
Here's what I think the OP is requesting:
<div ng-if="!show.v">Always shows...</div>
<div ng-init="show = {v: false}">
<div ng-repeat="step in steps"
ng-init="show.v = step.criticalError || show.v">
</div>
</div>
<div ng-if="show.v">Always shows...</div>
I have created a Tabs function below.
//Tabs ///
$('.tabs').each(function() {
var $tabs = $(this);
$tabs.find('.section-body > div:not(:first-child)').hide().end().find('.section-head a:eq(0)').addClass('active').end().find('.section-head a').on('click', function() {
$tabs.find('.section-head a').removeClass('active').end().find('.section-body > div:eq(' + $(this).index() + ')').show().siblings().hide();
$(this).addClass('active');
});
});
Here is the HTML:
<div class="section tabs">
<div class="section-head">
<a>Section A</a>
<a>Section B</a>
</div>
<div class="section-body">
<div>
<p>Section A</p>
</div>
<div>
<p>Section B</p>
</div>
</div>
</div>
This working fine, however, I wanted to use a Grid System plugin inside it, the plugin is here: http://loai.directory/Loai%20Aptana/assets/js/grid-system.js
So in order to use the Grid system plugin, the HTML of the tabs will look as follows:
<div class="section tabs">
<div class="section-head">
<a>Section A</a>
<a>Section B</a>
</div>
<div class="section-body">
<div>
<div class="grid" data-columns><!--Grid-->
<div>Section</div>
<div>Section</div>
<div>Section</div>
</div>
</div>
<div>
<div class="grid" data-columns><!--Grid-->
<div>Section</div>
<div>Section</div>
<div>Section</div>
</div>
</div>
</div>
</div>
Once I do that, I start getting this error: Uncaught TypeError: Cannot read property '1' of null for a live preview, visit http://loai.directory/Loai%20Aptana/profile and inspect the elements / open the browser console to see it.
I spent hours trying to debug this and fix it. One of the things I have tried, is to remove the tabs JS function and then grid system worked!, so I knew it was something to do with both plugins aren't working nicely together.
After farther dubbing, I found that the Grid System is trying to find the <div class="grid" data-columns> so it can apply the effect to it, however, the tabs function has hidden the one that is inside the second tab div:
<div>
<div class="grid" data-columns><!--Grid-->
<div>Section</div>
<div>Section</div>
<div>Section</div>
</div>
</div>
But, I mean the div is still in the DOM and therefor it should be accessible? What is wrong? how can I fix it?
*EDIT: Here's a link to a staging version of the site: http://staging-site.site44.com/ *
I am extremely new to jquery so I apologize if this question is extremely simple. What I'm trying to do on my website is first when the page is loaded have the content in my #topContent div fade in.
But along with this I'd also like my main navigation to use jquery hashtags to switch up the page content displayed in the #topContent div. I've read up a bit on how to do this in jquery and from what I've read I think I need create page sections within my main html doc that are hidden until a certain nav link is selected - then hide the content that is currently showing and show the content associated with the nav link that was just selected, how close am I?
Here's my attempt so far at doing this...
HTML
<nav id="headerNav">
<ul class="navList">
<li class="navItem">Products</li>
<li id="view-about" class="navItem">About</li>
<li class="navItem">Portfolio</li>
<li class="navItem">Contact</li>
</ul>
</nav>
</div>
</div>
<!-- topMain -->
<div id="topContentWrapper">
<div id="topContent">
<div id="#products">
<h2>Test worked! - products </h2>
<p>this test just worked sooo hard!</p>
</div>
<div id="#about">
<h2>Test worked! - about </h2>
<p>this test just worked sooo hard!</p>
</div>
<div id="#portfolio">
<h2>Test worked! - Portfolio </h2>
<p>this test just worked sooo hard!</p>
</div>
</div>
</div>
JS
// Fade In Effect
$(document).ready(function() {
$("#topContent").css("display", "none");
$("#topContent").fadeIn(2000);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#topContent").fadeOut(1000);
});
function redirectPage() {
window.location = linkLocation;
}
$("#view-about").click(function(event){
$("#products").fadeOut(1000);
$("#portfolio").fadeOut(1000);
$("#about").fadeIn(1000);
});
});
Ok, this code should work:
$(function(){
$last = null;
$(".navList li a").click(function(){
if ($last != null) $last.fadeOut(1000);
$last = $($(this).attr("href"));
$($(this).attr("href")).fadeIn(2000);
});
});
However, you will need to change your topContent to this:
<div id="topContent">
<div id="products" style="display: none;">
<h2>Test worked! - products </h2>
<p>this test just worked sooo hard!</p>
</div>
<div id="about" style="display: none;">
<h2>Test worked! - about </h2>
<p>this test just worked sooo hard!</p>
</div>
<div id="portfolio" style="display: none;">
<h2>Test worked! - Portfolio </h2>
<p>this test just worked sooo hard!</p>
</div>
</div>
Reasons:
Firstly, you need your ids to be like this: id="about" and not this: id="#about".
The id specified doesn't need a # in front of it. (Same as how class doesn't need a . when setting a tag with it)
The jQuery code I tested locally, so it should work.
Note:
You may want to automatically have some different content automatically displayed, because right now as it loads it is blank until you click one of the links.
Hope this helped!
Edit:
I suggest you change the code to this:
ids = [ "products", "about", "portfolio" ];
links = [ "Products", "About", "Portfolio" ];
$(function(){
$last = null;
$(".navList li a").click(function(){
New = "#" + ids[links.indexOf($(this).text())];
if ($last != null) $last.fadeOut(1000);
$last = $(New);
$(New).fadeIn(2000);
});
});
Because it will keep all the content constantly in the same place. For this to work, you'll need to change two more sections of your code:
<ul class="navList">
<li class="navItem">Products</li>
<li id="view-about" class="navItem">About</li>
<li class="navItem">Portfolio</li>
<li class="navItem">Contact</li>
</ul>
And:
<div id="topContent">
<div id="products" style="display: none; position: absolute">
<h2>Test worked! - products </h2>
<p>this test just worked sooo hard!</p>
</div>
<div id="about" style="display: none; position: absolute">
<h2>Test worked! - about </h2>
<p>this test just worked sooo hard!</p>
</div>
<div id="portfolio" style="display: none; position: absolute">
<h2>Test worked! - Portfolio </h2>
<p>this test just worked sooo hard!</p>
</div>
</div>
That last part was just my suggestion, but do whatever you need to.
Instead of doing this in your a.transition handler:
$("#topContent").fadeOut(1000);
do:
$("#topContent").children().fadeOut(1000);
The issue is that you're actually fading out the higher level item thus the children are no longer visible even if you fade them in.