I have been trying to develop a web blog app, where people can come and upload different blogs and can read blogs uploaded by others too. I was able to successfully upload the data on the firebase real-time database, but I am facing an issue while trying to retrieve data from firebase. I have a card from google material library and I want the title and desc to be displayed there below. But whenever I am trying to retrieve the data only data from the last node is getting displayed. Below is my code for html and javascript.
HTML code:
<div class="w">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text" id="titlePost">Welcome</h2>
</div>
<div class="mdl-card__supporting-text" id="descPost">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="post.html">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
Javascript code:
var rootRef = firebase.database().ref().child("posts");
rootRef.on("child_added",snap =>{
var title = snap.child("Title").val();
var desc = snap.child("desc").val();
$("#titlePost").text(title);
$("#descPost").text(desc);
});
Below is the pic of my database.
and here's what my retrieved data looks like
enter image description here
Only one node is retrieved
Put your posts in a list so that a new child won't replace your old child, if it is in a list it will just extend the list. Your parent in this case is the
"ul" which is callled "blog-posts", and you are going to append childs to this list like in the example below. Your children will expand this list and not overwrite each other
<body>
<div>
<ul class="blog-posts">
<li>
<!--Your Posts are here-->
<div class="mdl-card__title">
<h2 class="mdl-card__title-text" id="titlePost">Welcome</h2>
</div>
<div class="mdl-card__supporting-text" id="descPost">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</li>
</ul>
</div>
parent.append(`
<li>
<div class="w">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text" id="${key}">${title}</h2>
</div>
<div class="mdl-card__supporting-text" id="descPost">
${desc}
</div>
</div>
<li/>`
);
Only one node is retrieved
That seems unlikely. You can easily check this, by adding some simple logging and then checking the developer console of your browser:
rootRef.on("child_added",snap =>{
var title = snap.child("Title").val();
var desc = snap.child("desc").val();
console.log(title);
$("#titlePost").text(title);
$("#descPost").text(desc);
});
My expectation is that you'll see each title being logged. But since you always call $("#titlePost").text(title);, you only see the title of the last post in the HTML.
A simple fix is to just append the titles in the HTML:
$("#titlePost").append(title);
Now with this, you'll see all titles concatenated together. That's the correct content, but it probably looks horrible.
So the proper solution is to generate a bit of HTML around each title and description. As far as I can see, this is what you use:
rootRef.on("child_added",snap =>{
var key = snap.key;
var title = snap.child("Title").val();
var desc = snap.child("desc").val();
var parent = $("#titlePost").parent().parent().parent();
parent.append(`<div class="w">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text" id="${key}">${title}</h2>
</div>
<div class="mdl-card__supporting-text" id="descPost">
${desc}
</div>
</div>`
);
});
Related
I am creating a CV website that includes my info about my research papers. And I wanted to create an animation where when you click on the button that says "Paper 1" an abstract info box pops-up and tells you the information for the paper.
Likewise when you click on "Paper 2" the abstract info box for that paper pops-up. I am sharing pictures below of what it would look like. I know this type of animation requires either CSS/Javascript. I am using a template of a sample website to create. Any ideas on how to actually do it? I appreciate your help.
<li>
<a href="javascript:void(0);" class="tm-gallery-link" data-filter="research_1">
<i class="fas fa-edit nav-icon"></i>
Paper 1
</a>
</li>
<figure class="effect-honey tm-gallery-item research1">
<p > This is a paragraph about my first research paper. Quisque tincidunt, sem rutrum euismod ornare, tortor arcu tempus lorem, accumsan suscipit mauris lorem at lorem. Praesent feugiat mi at tortor tincidunt, ac consequat ante cursus.</p>
</figure>
Clicking on Paper 1
Clicking on Paper 2
You could try the following - I've implemented it in pure JavaScript so you don't have to worry about external libraries (you'll have to add your own styling though, but hopefully the mechanism will suffice):
CSS:
.hidden {
display: none
}
HTML
<!-- control -->
<div>
<div class="research-paper" id="paper-1">Paper 1</div>
<div class="research-paper" id="paper-2">Paper 2</div>
<div class="research-paper" id="paper-3">Paper 3</div>
</div>
<!-- what gets displayed -->
<div class="" id="paper-content-1">Lorem ipsum</div>
<div class="hidden" id="paper-content-2">Lorem ipsum 2</div>
<div class="hidden" id="paper-content-3">Lorem ipsum 3</div>
JavaScript:
let tracker = 1; // initially it's the first
// get every occurrence of "research-paper" class and add a 'click' eventListener to it
let researchPaperClass = document.getElementsByClassName('research-paper');
for(var j = 0; j < researchPaperClass.length; j++){
researchPaperClass[j].addEventListener("click", function(){
var currentId = this.id.replace("paper-", "");
// first, add 'hidden' to the previous class
document.getElementById("paper-content-" + tracker).className += " hidden";
// finally, remove 'hidden' from the current clicked one to show it
document.getElementById("paper-content-" + currentId).className = document.getElementById("paper-content-" + currentId).className.replace(/hidden/gm, "");
// update the tracker
tracker = currentId;
});
}
[Details here][1]
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<div onclick="myFunction()">
<li>
<a href="javascript:void(0);" class="tm-gallery-link" data-filter="research_1">
<i class="fas fa-edit nav-icon"></i>
Paper 1
</a>
</li>
</div>
<div style="display:none; background-color:yellow" id="myDIV">
<figure class="effect-honey tm-gallery-item research1">
<p > This is a paragraph about my first research paper. Quisque tincidunt, sem rutrum euismod ornare, tortor arcu tempus lorem, accumsan suscipit mauris lorem at lorem. Praesent feugiat mi at tortor tincidunt, ac consequat ante cursus.</p>
</figure>
</div>
This should solve it for you..
[1]: https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
include jquery to your project and this will do the job
$(document).on("click",".tab", function(e){
//prevent default behaviour of a tag
e.preventDefault()
//element clicked on
var clickedTab = $(this);
//id of the target content
var tabContentId = $(this).attr('href')
//remove the active class from all tabs and tab content elements
$('.tab').removeClass('active')
$('.tab-content').removeClass('active')
//add the active class to clicked tab and corresponding tab content element
clickedTab.addClass('active');
$(tabContentId).addClass('active');
})
.tab{
color:#aaa;
display:inline-block;
padding:5pt 15pt;
}
.tab.active{
color:#fff;
background-color:#839499;
font-weight:bold
}
.tab-content{
display:none
}
.tab-content.active{
display:block
}
<!--include jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- first tab active by default -->
<a class="tab active" href="#paper1">paper 1<a>
<a class="tab" href="#paper2">paper 2<a>
<a class="tab" href="#paper3">paper 3<a>
<!-- first content active by default -->
<div class="tab-content active" id="paper1">
content for paper 1
</div>
<div class="tab-content" id="paper2">
content for paper 2
</div>
<div class="tab-content" id="paper3">
content for paper 3
</div>
You could use divs. In this example I use buttons but it should be very easy to make it work with the code you have. Example:
<html>
<head>
<style>
.page1 {
display: none;
}
.page2 {
display: none;
}
.page1.add {
display: contents;
}
.page2.add {
display: contents;
}
</style>
</head>
<body>
<button onclick="page1()">Page1</button>
<button onclick="page2()">Page2</button>
<div class="page1">
<p>info about page 1...</p>
</div>
<div class="page2">
<p>info about page 2...</p>
</div>
<script>
function page1() {
document.querySelector('.page1').classList.add('add');
document.querySelector('.page2').classList.remove('add');
}
function page2() {
document.querySelector('.page2').classList.add('add');
document.querySelector('.page1').classList.remove('add');
}
</script>
</div>
</body>
</html>
I hope this solves your problem, anything that you put in the div will disappear and reappear. I have used this simple solution before.
You can do something like this (this is really a simple and general example you can modified as you want):
document.querySelectorAll('.paperTrig').forEach((element) => { element.addEventListener('click', function() { if (document.querySelector('.paper.show')) {document.querySelector('.paper.show').classList.remove('show');} this.nextElementSibling.classList.add('show');});});
ul { padding:0; list-style-type: none; display: flex; flex-flow: row nowrap }
.paper { transform: scale(0); transition: transform 0.5s ease-in-out; }
.show { transform: scale(1); }
<ul>
<li>
<button class="paperTrig">Paper 1</button>
<div class="paper">
<h1>Paper 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</li>
<li>
<button class="paperTrig">Paper 2</button>
<div class="paper">
<h1>Paper 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</li>
<li>
<button class="paperTrig">Paper 3</button>
<div class="paper">
<h1>Paper 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</li>
<li>
<button class="paperTrig">Paper 4</button>
<div class="paper">
<h1>Paper 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</li>
</ul>
The above code listen to click event on a button with class .paperTrig.
When user click on this button a function execute that removes .show from an active element (if it exist), and shows the wanted content.
Basically it looks for the next element sibling of the clicked button and put on it the show class.
The CSS animation achieved with the use of transform and transition.
For this CSS and Javascript are needed. The easiest way and supported by almost all browsers is given below.
Step 1: Edit Your HTML
Add 'onClick' attribute to the links, ie onClick="showContent(1);"
and 'id' attribute to the contents, ie id="research1"
<li>
<a href="javascript:void(0);" class="tm-gallery-link" data-filter="research_1" onClick="showContent(1);">
<i class="fas fa-edit nav-icon"></i>
Paper 1
</a>
</li>
<li>
<a href="javascript:void(0);" class="tm-gallery-link" data-filter="research_2" onClick="showContent(2);">
<i class="fas fa-edit nav-icon"></i>
Paper 2
</a>
</li>
<figure class="effect-honey tm-gallery-item research1" id="research1">
<p > This is a paragraph about my first research paper.</p>
</figure>
<figure class="effect-honey tm-gallery-item research2" id="research2">
<p > This is a paragraph about my second research paper.</p>
</figure>
A numeric value is used in the onClick="showContent(1);" function to identify the clicked link.
Step 2: Add CSS to hide the second content on initial page load
<style type="text/css">
#research1 {display:block; }
#research2 {display:none; }
</style>
Step 3: Add the Javascript function
<script type="text/javascript">
function showContent(x) {
var r1 = document.getElementById("research1");
var r2 = document.getElementById("research2");
if(x == 2){
r1.style.display = "none";
r2.style.display = "block";
} else {
r1.style.display = "block";
r2.style.display = "none";
}
}
</script>
I am using anchor tags to link navbar to the headers inside of a div on same page. When I click on the last header it shows up in the middle of the container instead of at the very top.
I want the bottom header to show up at the very top of the container and leave some white space below it.
Here is codepen https://codepen.io/sasha-code/pen/qBOyBrW
Is there an html way to do it? if not, is there a js way to add white space dynamically below the last section to make sure the header is at the top.
PS. I know this is happening because there is no scroll left. I want to somehow add it dynamically. I don't want to add hardcoded white space.
<div>
<a href='#top'>Top</a>
<a href='#middle'>Middle</a>
<a href='#bottom'>Bottom</a>
</div>
<div class="content">
<div>
<h2 id="top">Header Top</h2>
text
</div>
<div>
<h2 id="middle">Header Middle</h2>
text
</div>
<div>
<h2 id="bottom">Header Bottom</h2>
text
</div>
You could set the min-height of the last div section to 100% of the parent:
.content {
height: 400px;
width: 300px;
overflow:scroll;
}
#last {
min-height: 100%;
}
<div>
<a href='#top'>Top</a>
<a href='#middle'>Middle</a>
<a href='#bottom'>Bottom</a>
</div>
<div class="content">
<div>
<h2 id="top">Header Top</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div >
<h2 id="middle">Header Middle</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="last">
<h2 id="bottom">Header Bottom</h2>
Lorem ipsum dolor sit amet.
</div>
</div>
Put this code at the end of your file:
<br> <br> <br>
Now it should work fine 😊
I am pretty new to javascript, I have learned some of the basics but don't completely grasp it yet. I am trying to get the color of my nav on the right to change by adding an active class to it depending on what section I am at. I don't quite understand how I would implement appending the class to my nav item when it passes the specific div. Any help would be greatly appreciated. I just placed some random code below just so I can link the codepen. It's alot easier than me posting my entire html/css code here.
HTML
div class="global-container">
<div class="logo">
<div class="layer2">
</div>
</div>
<div class="copy">
<p>© text</p>
</div>
<div class="links">
<a href="#">
<img src="">
</a>
<br>
<a href="#">
<img src="">
</a>
</div>
<!-- End of Logo !-->
<ul class="sidebar">
<a href="#section1">
<div class="item">
</div>
</a>
<a href="#section2" >
<div class="item">
</div>
</a>
<a href="#section3">
<div class="item">
</div>
</a>
<a href="#section4" >
<div class="item" >
</div>
</a>
<a href="#section5" >
<div class="item">
</div>
</a>
</ul>
<!-- Sidebar!-->
<div class="content-container">
<div id="section1">
<div class="inner-container">
<div class="intro-message center">
<h1 class="headline-big center">
section1</h1>
<h2>
text
</h2>
<p>text</p>
<div class="button">
text
text
</div>
<h6 class="change">text</h6>
</div>
</div>
<div id="section2">
<div class="about-message">
<div class="left">
<h1>
Section 1</h1>
<p> text
<br>
<br>
text</p>
</div>
</div>
</div>
<div id="section3">
<div class="inner-container">
<div class="education-message ">
<h1 >
section3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
<div id="section4">
<div class="inner-container">
<div class="intro-message center">
<h1 class="headline-big center">
Section4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div id="section5">
<div class="inner-container">
<div class="intro-message center">
<h1 class="headline-big center">
section 5</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
CSS - I want to add to .item class
.active {
background-color: red;
}
https://codepen.io/anon/pen/BZzbGz
Heres an example:
https://bonhomme.lol/
The nav-lines on the right change color as you scroll. I want to achieve this effect but the color changes depending on which section div I've reached.
First, I get the scroll position of the items in the navigation. Then add/remove the class based on the current scroll position. Check this out:
Your modified Codepen
$(document).ready(function() {
$(document).on("scroll", onScroll);
function onScroll(event) {
var scrollPos = $(document).scrollTop();
$(".sidebar a").each(function() {
var currDiv = $(this).find("div");;
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if(refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos)
{
$(".sidebar a div").removeClass("active");
currDiv.addClass("active");
} else {
currDiv.removeClass("active");
}
});
}
});
Edit: Here's the explanation you requested of the items we're using in the IF
refElement.position().top returns how many pixels from the top of the page of that element is.
refElement.height() is returns the pixels representing the height of the element.
scrollPos returns in pixels how far down on the page we currently are.
For changing class of an element on scroll - jquery:
<script>
if($(document).scrollTop>10){
$("#myDiv).addClass("active");
}
else{
$("#myDiv").removeClass("active");
}
You have different options to do this: use a library or write the code yourself. If you chose the latter, you can try the following approaches.
1) Compare offsets
window.scrollY gives your the scroll amount of the page. element.offsetTop gives you the (fixed) offset of an element on the page. You can compare these values to determine, which element is currently in view.
2) get screen coordinates
element.getBoundingClientRect() gives you the screen coordinates of an element. You can use these to check if it is at the top of the page.
Now you just use a hook on the scroll event to check the positions and know where you are at. My code snippet only accounts for scrolling down, I leave the "scroll up" case for you to implement as an exercise.
var headings = [document.querySelector("h1"),document.querySelector("h2"),document.querySelector("h3"),document.querySelector("h4")];
var nav = document.querySelector("nav span");
var currentIndex=0;
document.addEventListener("scroll",function(){
// get the current position of the element
let currentElPos = headings[currentIndex].getBoundingClientRect().top;
// if it's near the top border update the navigation
if (currentElPos < 100){
// in your case, you would update the class
nav.innerHTML = headings[currentIndex].innerHTML;
if (currentIndex+1<headings.length) currentIndex++;
}
});
h1,h2,h3{
margin-bottom:20em;
}
h4{
margin-bottom:30em;
}
nav{
position:fixed;right:20px;top:20px;
border:2px solid red;padding:5px;
}
<nav>You are viewing:<br><span>First heading!</span></nav>
<h1>First heading!</h1>
<h2>Second heading!</h2>
<h3>Third heading!</h3>
<h4>Fourth heading!</h4>
I am facing a very weird problem that never experienced in past!! I have a html link in my website as follows:
<div>
Facebook
</div>
Unfortunately it is showing as plain text "Facebook", not as clickable link text!
What can be the possible reasons behind this kind of weird behavior?? Expecting help from the expert guys!!
Here is the Complete Code:
#{
ViewBag.Title = "News";
}
<link rel="stylesheet" type="text/css" href="~/Content/css/pixeden-icons.css">
<link rel="stylesheet" href="~/Content/css/main.css">
<div id="banner-area">
<img src="~/Content/images/banner/banner2.jpg" alt="" style="width: 100%; height: 350px;" />
<div class="parallax-overlay"></div>
<!-- Subpage title start -->
<div class="banner-title-content">
<div class="text-center">
<h2>News and Events</h2>
<ul class="breadcrumb">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("News and Events", "News", "NewsAndEvents")</li>
</ul>
</div>
</div><!-- Subpage title end -->
</div><!-- Banner area end -->
<div>
FaceBook
</div>
<div class="container archive">
<div class="pageContentArea archive-content">
<div class="timeline-wrap">
<article>
<time datetime="2015-01-31 08:30:45.687">26 jan,2015</time>
<div class="article_inner">
<h1>The Lego Movie” snubbed at the Oscars</h1>
<img src="~/Content/images/News/img1.jpg" alt="" />
<p>
Pellentesque quis sapien eleifend aliquet, morbi ideru dictum finibus blandit. Phasellus a iaculis hiri habitase platea dictumst neque, tincinq mangas.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<!-- <a class="readMore" href="#">Read More..</a> -->
</div>
</article>
</div><!--timeline-wrap-->
</div><!--pageContentArea-->
</div><!--container-->
#section scripts {
<script src="~/Scripts/js/jquery.dlmenu.js"></script>
<script src="~/Scripts/js/jquery.sticky.js"></script>
<script src="~/Scripts/js/main.js"></script>
}
Thanks!!
The problem isn't in your html syntax. Everything is okay with FaceBook. Maybe it's overridden by some styles (text-decoration: none) in your css file, which is included in <head> section. To debug the problem, try to set text-decoration:underline(default value) to your anchor tag, make it from browser inspect to be sure, that it won't be overridden by the other styles or script.
I would like to create an user friendly interface on my site where from a php restrictred area of the site I can add a simple HTML to another open page of the site.
The simple HTML (below "BASIC HTML") has always the same structure, I want the user to change the words inside the header,the main div and to upload a new image.
I'm struggling about how to do it. A nice idea i had is to use ZinoUI, sothat in the restricted area i can show the basic HTML and the user can modify it. It will be something like what shown in "ZinoUI HTML".
What I don't really know how to do is how to "print" this new HTML code modified by the user and insert it on the open page of the site.
Is it possible? is this the easier way?
BASIC HTML
<div id="simple HTML">
<div class="header">
<h1>Lorem ipsum dolor sit amet..</h1>
</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
<div class="image">
<img src="pic_mountain.jpg" alt="Mountain View">
</div>
</div>
.
ZinoUI HTML
<div class="header" id="editable">
<h1>Lorem ipsum dolor sit amet..</h1>
</div>
<div class="main" id="editable">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
<div class="image" id="editable">
<img src="pic_mountain.jpg" alt="Mountain View">
</div>
<p>To activate editable control, double click on the text above.</p>
</div>
<script type="text/javascript">
$(function () {
$("#editable").zinoEditable({
control: "textarea",
event: "dblclick"
});
});
</script>
First of all, each HTML id must be unique, so you don't want to have a series of <div id="editable">...</div>.
What you can do is add an editable class <div class="editable">..</div> if you are going to have more than one editable div and use
$(function () {
$(".editable").zinoEditable({
control: "textarea",
event: "dblclick"
});
});
Then to save you subscribe to the save event, say passing in the control's id doing the save and the edited text:
<script type="text/javascript">
$(function () {
$(".editable").zinoEditable({
buttons: {
"Save": function (ui) {
$(this).zinoEditable("save");
},
"Cancel": function (ui) {
$(this).zinoEditable("close");
}
},
save: function (event, ui) {
$.post("../../request?plugin=editable", {
field: $(this).attr("id"),
value: ui.control.val()
});
console.log("save");
//return false;
}
});
});
</script>
Where "../../request?plugin=editable" is the PHP function to call to save the data (although replace with whatever is appropriate for you).