I have a code for a web page, which can handle image uploading, but not video uploading. The page is built using Javascript and Html. This is the HTML code for the page to post a new picture. Would it be different for a video page? And also, do I need to update my JS code too?
<!-- Post new pic page -->
<section id="page-add" class="mdl-grid fp-content" style="display: none;">
<div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid mdl-grid--no-spacing">
<div class="fp-addcontainer mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop">
<div class="fp-overlay">
<i class="material-icons">hourglass_full</i>
</div>
<img id="newPictureContainer" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==" alt="New Picture to Upload">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<form id="uploadPicForm" action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="imageCaptionInput">
<label class="mdl-textfield__label" for="imageCaptionInput">Image caption...</label>
</div>
<br />
<button type="submit" class="fp-upload mdl-button mdl-js-button mdl-button--raised mdl-color--amber-400">
Upload this pic!
</button>
</form>
<div class="fp-legalese-add">
All uploaded pictures will be publicly viewable, and must adhere to the Terms of Service.
</div>
</div>
</div>
</div>
</section>
Related
I take out the codes related to menu area (as shown below) from index.html to an independent file header.html,
and then include header.html into index.html with,
<body>
<div id="header"></div>
...
<script>
$("#header").load("header.html");
</script>
</body>
However, when I click the search button, there is no response. Originally, a search box should appear as shown below.
The related codes are listed below, (the complete example is here)
<!-- page search box -->
<div class="page_search_box">
<div class="search_close">
<i class="ion-close-round"></i>
</div>
<form class="border-bottom" action="#">
<input class="border-0" placeholder="Enter keyword..." type="text" />
<button type="submit"><i class="ei ei-search"></i></button>
</form>
</div>
<div class="main_header_right d-flex align-items-center">
<div class="header_account">
<ul class="d-flex">
<li class="header_search"> <i class="ei ei-search"></i> </li>
</ul>
</div>
<div class="canvas_open">
<i class="ion-navicon"></i>
</div>
</div>
What's wrong?
Question Background:
I am using Jasny Bootstrap to implement a responsive offcanvas 'reveal' style menu.
The Issue:
When the menu is opened on a mobile device the scrolling element of the menu is not enabling.
I have wrapped the entire app (where my AngularJS view is injected) with a div style overflow-y:hidden as shown:
<body ng-app="app">
<div style="overflow-x:hidden">
<div ui-view style="height:100%">
//View is injected here based on routing.
</div>
</div>
</body>
This overflow styling means i can now scroll the menu on a mobile device but i now have an issue where and When the menu is scrolled to the top there is a gap showing the menu underneath as shown here:
Once the page is scrolled down slightly the responsive navbar shows:
The Code:
The Following is as shown above, This is the main View div where the page is injected depending on its routing:
<body ng-app="app">
<div style="overflow-x:hidden">
<div ui-view style="height:100%">
//View is injected here based on routing.
</div>
</div>
</body>
This is the Results view of the app which contains the navbar elements:
<div ng-controller="ResultsController" ng-show="hideSearch" style="height:100%">
<div class="navmenu navmenu-default navmenu-fixed-left" id="updateMenu">
<div class="text-center headerPad"><h3>Compzee <img src="Images/CompzeeLogoSmall.png" class="logoSize" /></h3></div>
<div class="col-lg-12 pullInMenu">
<form ng-submit="search()" novalidate="novalidate">
<div class="form-group">
<label for="search">Search Term:</label>
<input type="text" class="form-control" ng-model="item" id="itemUpdate" required>
</div>
<div class="form-group">
<label for="search">Product Category:</label>
<select class="form-control" ng-model="catagory" required>
<option value="" disabled selected>Select A Product Category</option>
<option>All</option>
<option>Baby</option>
<option>Business, Office & Industrial</option>
<option>Cameras & Photography</option>
<option>Clothes & Accessories</option>
<option>Comics, Books & Magazines</option>
<option>Computers & Tablets</option>
<option>Consoles</option>
<option>DVD's, Films & TV</option>
<option>Garden & Patio</option>
<option>Health & Beauty</option>
<option>Holiday & Travel</option>
<option>Home</option>
<option>Kitchen</option>
<option>Jewellery</option>
<option>Mobile Phones & Accessories</option>
<option>Musical Instruments</option>
<option>Music</option>
<option>Pet Supplies</option>
<option>Shoes</option>
<option>Sporting Goods</option>
<option>Toys & Games</option>
<option>Vehicle Parts & Accessories</option>
<option>Video Games</option>
<option>Watches</option>
</select>
</div>
<div class="form-group">
<label for="search">Country:</label>
<select class="form-control" ng-model="selectedCountry" required>
<option value="" disabled selected>Select A Country</option>
<option>UK</option>
<option>US</option>
<option>FR</option>
<option>DE</option>
</select>
</div>
<div class="form-group">
<div class="text-center">
<img ng-src="{{countryImg}}" />
</div>
</div>
<div class="form-group">
<label for="search">Marketplace</label>
<select class="form-control" ng-model="selectedMarketPlace" required>
<option value="" disabled selected>Select A Marketplace</option>
<option>Ebay & Amazon</option>
<option>Ebay</option>
<option>Amazon</option>
</select>
</div>
<div class="form-group">
<div class="text-center">
<img class="marketPlaces" ng-src="{{image}}" />
<img class="marketPlaces" ng-show=" showImg" ng-src="{{imageSecond}}" />
</div>
</div>
<div class="form-group">
<div class="content">
<rzslider rz-slider-model="minRangeSlider.minValue" rz-slider-high="minRangeSlider.maxValue" rz-slider-options="minRangeSlider.options"></rzslider>
</div>
</div>
<div class="form-group">
<label for="search">Min Price</label>
<input type="text" class="form-control" ng-model="minTextVal" id="slider-margin-value-min" readonly>
</div>
<div class="form-group">
<label for="search">Max Price</label>
<input type="text" class="form-control" ng-model="maxTextVal" id="slider-margin-value-max" readonly>
</div>
<div class="form-group text-center">
<label for="search">Prices High To low</label>
<input id="highToLowBox" type="radio" ng-value="true" ng-model="priceOrder">
</div>
<div class="form-group text-center">
<label for="search">Prices Low To high</label>
<input id="lowToHighBox" type="radio" ng-value="false" ng-model="priceOrder">
</div>
<div class="form-group">
<button class="btn btn-success" ladda="searchingService.updating" type="submit" data-style="zoom-in" style="width:100%">
<span>Update</span>
</button>
</div>
</form>
</div>
</div>
<div class="canvas" id="resultsView">
<div class="navbar navbar-default navbar-fixed-top">
<button id="menuBtn" type="button" ng-click="ScrollUp()" class="navbar-toggle" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="containerId" class="container">
<div class="topOffSet ">
<div class="col-lg-12 text-center">
<div id="itemHolder">
<h4><b>{{searchingService.searchList.length}} Results found from your search criteria.</b></h4>
<div class="panel panel-default col-lg-12 text-center" ng-show="searchingService.noResults">
<div class="panel-body"><img src="Images/CompzeeLogoSmall.png" class="logoSize" /><p>We could not find any results to match your search criteria</p><p>Please review your search terms and try again.</p></div>
</div>
<div ng-repeat="item in searchingService.filteredItems" class="col-lg-4">
<div class="panel panel-default maxPanelHeight">
<div class="panel-heading textOverflow" id="panelHeading">
<h3 class="panel-title text-center"><b>{{item.Title}}</b></h3>
</div>
<div class="panel-body">
<img src={{item.Image}} class="picHeight img-rounded img-responsive center-block" />
<h4 class="text-center"><b>{{item.Price}}</b></h4>
<h4 class="text-center">See More</h4>
<div class="text-center"><img class="originPic" src={{item.marketPlaceImg}} /></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 text-center">
<uib-pagination total-items="items.length" ng-model="currentPage" max-size="maxSize" class="pagination-md" boundary-links="true" rotate="false">
</uib-pagination>
</div>
</div>
</div>
</div>
If you have z-index issue:
add z-index: 1000; to the .navmenu class.
if still doesn't show it at top, add z-index: 1; to the .canvas class.
if still doesn't work, it means you are using z-index inside other classes (sub or parent tags of .canvas or .navmenu class). for solving it you need to remove them. for searching it you just search z-index inside your entire project to find which one causing problem and then try number 1 and 2 again. Please be aware of inline styles. don't search just inside your css file. (I don't know what is your IDE but if you are using Eclipse just press CTRL+H and type z-index to search your entire project)
if you did 1,2 and 3 and still doesn't work, it means you cached and need to clear your cache.
If you have Height Issue:
Put Height:100%; where you wrote overflow-x:hidden. Height 100% means 100% of parent height. When you put height:100% inside a node which it's parent has 200px height. it means node height will be 200px and not more.
Use the z-index property to show an element above an other.
The bigger z-index will be up the others.
Exemple: z-index:2 will be shown up to z-index:1.
So I have a major style change whereas when all my views were originally setup I had used Bootstrap and relied on the container class to adjust for media queries at breakpoints of 1200px, 992px, and 768px. All my form input and other content work their padding and all off of the container for paddings, margins, etc... Now, it is requested that the width be 100%, but all the content to stay where it is so that the background colors styling fills the width of display.
I was trying to think of how I can add another container class to make this work over all of the views. What are some recommendations on this with keeping the constraints of content to the 1200px and so on (for media queries and such), but make the other areas spread to that 100%?
Here is an image capture of it now. It is just the tan and dark gray area with the topo image that would expand 100% while all else stays within constraints of container class.
And my code is structured as so you can see where my delima is with over-riding bootstraps container class:
<div class="container">
<form role="form">
<div class="naviaHead col-md-12">
<div class="naviaHeader">
<div class="inner">
<div class="col-md-6 loginArea">
<h1 class="col-md-8">Login</h1>
<div class="form-group">
<div class="form-group col-md-8 naviaInp">
<input type="text" name="userName" class="form-control" placeholder="username" data-ng-model="loginData.userName"autofocus>
</div>
<div class="form-group col-md-8 naviaInp">
<input type="password" name="passWord" class="form-control" placeholder="password" data-ng-model="loginData.password">
</div>
<div style="clear: both;">
<input type="button" class="naviaBtn naviaBlue" data-ng-click="login()" value="login">
<div data-ng-hide="message == ''" class="alert alert-danger">
{{message}}
</div>
</div>
<div class="loginForget">
<span><a class="naviaLink" href="#/logreg/forgotUser">forgot username</a> or <a class="naviaLink" href="#/logreg/forgotPass">forgot password</a></span>
</div>
<div class="sowLogin">
<img class="col-md-3" src="ppt/assets/images/login/sowIcon.svg">
<p class="col-md-9"><a class="naviaLink" href="https://pebb.flex-plan.com/part/PortalRegistration.aspx">PEBB eligible State of Washington employees please click here to access the portal</a></p>
</div>
</div>
</div>
<div class="col-md-6">
<img style="padding-left: 25%;" src="ppt/assets/images/login/naviaLogo.png">
</div>
</div>
</div>
</div>
</form>
<div class="loginLearn">
<div id="area1" class="col-md-4 learnSections">
<img src="ppt/assets/images/login/teaserImage1-full.png">
<div class="learnText">
<h3 class="teaserTitle">Online Account Access</h3>
<p class="teaserText">24/7 Access to balances, claim submissions and all things Navia!</p>
<button type="button" class="btn btn-primary learnButtons">learn more</button>
</div>
</div>
<div id="area2" class="col-md-4 learnSections">
<img src="ppt/assets/images/login/teaserImage2-full.png">
<div class="learnText">
<h3 style="margin-top: 0;" class="teaserTitle">Navia Benefits Card</h3>
<p class="teaserText">Don't wait for reimbursement!</p>
<button type="button" class="btn btn-primary learnButtons">learn more</button>
</div>
</div>
<div id="area3" class="col-md-4 learnSections">
<img src="ppt/assets/images/login/teaserImage3-full.png">
<div class="learnText">
<h3 style="margin-top: 0;" class="teaserTitle">FlexConnect</h3>
<p class="teaserText">Link your FSA to your insurnace and file claims instantly!</p>
<button type="button" class="btn btn-primary learnButtons">learn more</button>
</div>
</div>
</div>
<div style="background-color: #ede8e2; height: 150px; clear: both;">
<!-- intentionally blank -->
</div>
</div>
This will solve your purpose
<div class="container-fluid" style="background-color:red;">//This will be 100% width
<div class="container">//Inside this put your content as it was to make it indent as previous
//Your page HTML here
</div>
</div>
This is driving me nuts....as per this page http://kudosoo.com/twofolio.html
there is an issue with the left nav working correctly.The top part of the menu disappears upon loading. I've tried adjusting the css and html in different ways to solve this but nothing has worked to date.
I believe its linked to the either the #container or how the drop dwon menu is showing on the page, seems to be sitting on top of the menu.
Any help is gratefully received.
Main page code is below. Example page is here
<div id="preloader">
<div id="status">
<p class="center-text">
Loading the content...
<em>Loading depends on your connection speed!</em>
</p>
</div>
</div>
<div class="all-elements">
<div id="sidebar" class="page-sidebar">
<div class="page-sidebar-scroll">
<div class="sidebar-controls">
</div>
<div class="sidebar-header">
<img class="sidebar-logo round-decoration" src="images/general-nature/8s.jpg" alt="img">
<h4 class="center-text">kudosoo</h4>
<em class="center-text">Get badged today</em>
</div>
<div class="sidebar-breadcrumb">
<div class="sidebar-decoration"></div>
<p>Navigation</p>
<div class="sidebar-decoration"></div>
</div>
<div class="navigation-items"></div>
<div class="nav-item">
Home<em class="unselected-nav"></em>
</div>
<div class="sidebar-decoration"></div>
<div class="nav-item">
Activity<em></em>
<div class="nav-item-submenu active-submenu">
<div class="sidebar-decoration"></div>
Received <em class="unselected-sub-nav"></em>
Awarded <em class="unselected-sub-nav"></em>
Friends <em class="unselected-sub-nav"></em>
</div>
</div>
<div class="sidebar-decoration"></div>
<div class="nav-item">
Select Badge<em class="dropdown-nav"></em>
<div class="nav-item-submenu">
<div class="sidebar-decoration"></div>
Wide item Portfolio <em class="selected-sub-nav"></em>
</div>
</div>
<div class="sidebar-decoration"></div>
<div class="nav-item">
My Profile<em class="unselected-nav"></em>
</div>
<div class="sidebar-decoration"></div>
<div class="nav-item">
Close<em class="unselected-nav"></em>
</div>
</div>
<div class="sidebar-breadcrumb">
<div class="sidebar-decoration"></div>
<p>Let's get social!</p>
<div class="sidebar-decoration"></div>
</div>
<div class="navigation-items">
<div class="nav-item">
Facebook<em class="link-nav"></em>
</div>
<div class="sidebar-decoration"></div>
<div class="nav-item">
Twitter<em class="link-nav"></em>
</div>
</div>
<div class="sidebar-decoration"></div>
<p class="sidebar-copyright center-text">Copyright 2014.
<br>All rights reserved.</p>
</div>
</div>
<div id="content" class="page-content">
<div class="content-controls solid-color fixed-header">
<em class="content-title">Who's getting Kudosoo today?!</em>
LogOut
</div>
<div class="fixed-header-clear"></div>
<!---HTML code not to change ends-->
<div class="content">
<div id="container">
</div>
<!--Search options to find firends, requests and rejections-->
<div id="friendsfilter">
<form id="friendsfilter">
<div class="error" style="display:none"></div>
<div class="form-group">
<div class="input-group input-group-hg input-group-rounded">
<span class="input-group-btn">
<button id="find_button" type="button" class="btn"><span class="fui-search"></span>
</button>
</span>
<input type="text" id="friendsearch" placeholder="Find Friend" class="form-control" />
</div>
</div>
<select name="huge" class="btn-group select select-block mbl select-multiple" id="s_Friends">
<option value="0">Click to manage friend connections</option>
<option value="f_connected">Friends</option>
<option value="f_requests">Requests</option>
<option value="f_rejected">Declined</option>
<option value="f_sent">Sent</option>
</select>
<div id="FriendsConnected"></div>
<div id="FriendsPending"></div>
<div id="FriendsRejected"></div>
<div id="FriendsSent"></div>
</form>
</div>
<!--Friends profile info and stats-->
<div id="container friendsProfile">
<form>
<div class="error" style="display:none"></div>
<button id="friendsProfile" class="button button-red">Unfriend</button>
</form>
</div>
<!--Displays a blank no user image on the page if no matches are found in the parse database or displays an image of the user if a match is found-->
<div id="container">
<img style="display:none" src="/img/no-user.png" id="no_user" alt="No user found" class="BadgeImgOutline responsive-image">
<div id="userimgs"></div>
</div>
<div id="container" class="container no-bottom">
<!---List of connected friends is generated from script below, the different divs split the results depending which button is clicked-->
<div id="containerFriends"></div>
<div id="containerFriendsPending"></div>
<div id="containerFriendsRejected"></div>
<div id="containerFriendsRequestSent"></div>
<div id="containerFriendsConnected"></div>
<div id="containerFriendsProfile"></div>
</div>
<!--Displays friends uploaded badges after the user clicks on their profile picture-->
<div id="container">
<div id="badgeimgs"></div>
</div>
</div>
</div>
</div>
</div>
<!--Footer stuff-->
<div class="container">
<div type="button" id="decline" class="btn btn-danger mrs"></div>
<div class="footer-socials">
</div>
<p class="copyright uppercase center-text no-bottom">Copyright 2014
<br>All rights reserved</p>
</div>
<div style="height:350px"></div>
</div>
</div>
So, as I can see it.. really, the navigation shouldn't be showing at all when the page is loaded, correct? As the navigation is shown when the main page content is slid to the right?
z-index is used to order the layers of divs in HTML. The higher the number, the more 'forward' it will be placed on the page (back to front).
Currently, your <div id="content"> has a z-index of 10, whilst your <div id="sidebar"> has a z-index of 2.
This means your Content div will be placed infront of your Sidebar div, causing the top of the sidebar to be hidden.
Changing these values in your CSS file will change the order.
.page-content is on line 9 of your style.css file
.page-sidebar is on line 25 of your style.css file
i think in line 135 you closed the div wrong
remove closing div from line 135 and place in the end of side bar code at line 162
<div class="nav-item">
Close<em class="unselected-nav"></em>
</div>
</div>
Make the Z-index of your sidebar to 11. Your page content has z-index of 10
<div id="sidebar" style="z-index:11" class="page-sidebar">
I actually resolved this by adjusting <div style="height:350px"></div> to
<div style="height:3350px"></div> worked. The menu now works as expected. Not shown when the page loads, but shown in full when the button is clicked to display it.
I have been working with the Twitter Bootstrap on a mini project. I am using 's with it and there is a bit of weird behaviour. I have jQuery which allows me to create new tabs when a button is clicked. The new tab is made active and contains a form. This form displaces the title of the below and I can't find out why. Can anyone help?
Code Snippets:
<section id="builder">
<div class="page-header">
<h1>App Builder. <small>Create your app.</small></h1>
</div>
<div class="span7">
<!-- ===== App Title ===== -->
<div class="control-group">
<label class="control-label" for="appTitle">App Title</label>
<div class="controls">
<input type="text" class="input-xlarge" id="appTitle">
<p class="help-block">Enter the title for your app. It will appear at the top of your app.</p>
</div>
</div>
<!-- ===== App Subtitle ===== -->
<div class="control-group">
<label class="control-label" for="appSubtitle">App Subtitle</label>
<div class="controls">
<input type="text" class="input-xlarge" id="appSubtitle">
<p class="help-block">Enter the subtitle for your app. It will appear below the title.</p>
</div>
</div>
<!-- ===== App Theme ===== -->
<div class="control-group">
<label class="control-label" for="appTheme">App Theme</label>
<div class="controls">
<select id="appTheme">
<option>Dark</option>
<option>Light</option>
</select>
<p class="help-block">Select the theme for your app. You can preview your theme on the right.</p>
</div>
</div>
<!-- ===== App Pages ===== -->
<p>App Pages</p>
<ul class="nav nav-tabs" id="tabHeaders">
<li><i class="icon-plus"></i>Add Page</li>
<!-- Tabs (Created by Javascript) -->
</ul>
<div class="tab-content" id="tabContent">
<!-- Tab Content (Created by Javascript) -->
</div>
</div>
<div class="span4">
<div class="iphonebackground">
<div class="screenbackground"></div>
</div>
</div>
</section>
<section id="preview">
<div class="page-header">
<h1>Preview your App. <small>See your app in it's full glory before you download it.</small></h1>
</div>
</section>
Before adding a new tab:
After adding a new tab:
It looks like the text is being floated around the new tab. Try using clear:left; in the CSS for that text to see if it correctly drops back below the tab.