The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

i would like 2 simple taps like the multi taps in home page at foeumotion

View previous topic View next topic Go down

i would like 2 simple taps like the multi taps in home page at foeumotion

Post by Michael_vx on February 5th 2017, 2:15 pm

i would like 2 simple taps like the multi taps in home page at foeumotion
as simple as possible so it wont make any conflict with other Scripts
to content these 2 comments boxes
1- facebook comments
Code:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_EN/all.js#xfbml=1"></script><fb:comments href="showthread.php?tid={$tid}" num_posts="3" width="700"></fb:comments>
2- Disqus comments
Code:
<script>

/**
 *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
 *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables */
/*
var disqus_config = function () {
    this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.src = 'http://http-miccsoft-net.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

and easy to castuom the taps bars and cloros with my own theme if possible Smile
thanks in advance
i hope i did not mistake the section
avatar
Michael_vx
Forumember

Male Posts : 664
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Re: i would like 2 simple taps like the multi taps in home page at foeumotion

Post by SLGray on February 5th 2017, 9:47 pm

Do you mean tabs?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 40197
Reputation : 2716
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: i would like 2 simple taps like the multi taps in home page at foeumotion

Post by Michael_vx on February 9th 2017, 1:04 am

SLGray wrote:Do you mean tabs?

something like that



to keep both comments services in 1 block Smile
avatar
Michael_vx
Forumember

Male Posts : 664
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Re: i would like 2 simple taps like the multi taps in home page at foeumotion

Post by SLGray on February 9th 2017, 1:28 am

The topic was posted in the wrong section, so I have moved it to the correct section.
Please read our forum rules: ESF General Rules


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 40197
Reputation : 2716
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: i would like 2 simple taps like the multi taps in home page at foeumotion

Post by Michael_vx on February 10th 2017, 5:58 pm

sorry for posting in wrong section
and im wating for the answer
avatar
Michael_vx
Forumember

Male Posts : 664
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Re: i would like 2 simple taps like the multi taps in home page at foeumotion

Post by Michael_vx on February 13th 2017, 11:41 pm

how to style this one
to make it better in view
Code:
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>
body {font-family: "Lato", sans-serif;}
ul.tab li a {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
cursor: pointer;
}
/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
background:white;
}
</style>
<body>

<p>يرجى اختيار الخدمة التى تريد التعليق عن طريقها</p>

<ul class="tab">
  <li><a class="tablinks" onclick="openCity(event, 'London')">facebook</a></li>
  <li><a class="tablinks" onclick="openCity(event, 'Paris')">Disqus</a></li>
</ul>

<div id="London" class="tabcontent">
<P><center>
<div id="fb-root"></div><script src="http://connect.facebook.net/en_EN/all.js#xfbml=1"></script><fb:comments href="showthread.php?tid={$tid}" num_posts="3" width="700"></fb:comments>
   </p></center>
</div>

<div id="Paris" class="tabcontent">
<p><div id="disqus_thread"></div>
<script>

/**
 *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
 *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables */
/*
var disqus_config = function () {
    this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.src = 'http://http-miccsoft-net.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
                                    </p>
</div>

<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>
avatar
Michael_vx
Forumember

Male Posts : 664
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Re: i would like 2 simple taps like the multi taps in home page at foeumotion

Post by Michael_vx on February 16th 2017, 11:47 pm

any tips here ?
avatar
Michael_vx
Forumember

Male Posts : 664
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum